社区首页 >问答首页 >如何遍历环绕的锚点链接，并将图像和ajax加载到figcaption元素中？

问如何遍历环绕的锚点链接，并将图像和ajax加载到figcaption元素中？
EN

Stack Overflow用户

提问于 2021-03-20 08:46:03

回答 2查看 29关注 0票数 0

有人能帮我解决我认为我对JQuery中的$this关键字缺乏理解的问题吗？我在一个页面上有3张图片，每张图片都有一个锚点链接。我想循环通过并获得锚链接的url，然后使用.load我想ajax从该url加载一些内容，并将其放在该图像的figcaption元素中。我确信下面的代码可以正常工作，但它所做的是用ajax加载的内容替换图像，而不是将内容放在figcaption中。快把我逼疯了！这就是我目前所知道的..。

    $( ".artist-preview a" ).each(function( ) {
        var $pageUrl = $(this).attr("href");
        var $result = $pageUrl.split("/");
        var $param = $result[$result.length-2];
        $(this, "figcaption").load("/" + $param + " .wp-block-media-text__content p");
    });

javascript

html

jquery

ajax

this

回答 2

Stack Overflow用户

回答已采纳

发布于 2021-03-21 14:06:58

我能够自己回答这个问题。问题是人物字幕不是$( this )的一部分，它实际上是同级的，所以通过更改最后一行，让它使用.sibling()，我就能让它工作了。

这是我用过的解决方案。这也限制了字符，并使整个包含元素可单击，以便用户可以访问内部登录页面。

    $( document ).ready(function() { 
    $( ".artist-preview a" ).each(function( ) {
        var $pageUrl = $(this).attr("href");
        var $result = $pageUrl.split("/");
        var $param = $result[$result.length-2];
        $(this).siblings("figcaption").load("/" + $param + " p");
    });
    
    $( document ).ajaxComplete(function() {
        $( ".artist-preview figcaption p" ).each(function( i ) {
            var $txt = $(this).text().substr(0, 220);
            $(this).text($txt);
            
        });
    });
    
    $(".artist-preview").click(function() {
        window.location = $(this).find("a").attr("href"); 
        return false;
    });

});

票数 0

Stack Overflow用户

发布于 2021-03-20 10:50:35

除非你习惯于使用jQuery，否则下面这个普通的javascript可能会让你感兴趣。我做了一些假设，因为问题中缺少源html标记方面的某些细节。

const insertafter=(a,b)=>{b.parentNode.insertBefore(a,b.nextSibling)}

document.querySelectorAll('.artist-preview a').forEach(a=>{
    let result=a.href.split('/');
    let param=result[ result.length - 2 ];
    
    let fig=a.parentNode.querySelector('figcaption');
    if( fig==null ){
        fig=document.createElement('figcaption');
        insertafter( fig, a.parentNode.querySelector('img') );
    }
    fig.textContent=param
});

figcaption{display:block;padding:1rem;border:1px solid black;background:whitesmoke}

<p class='artist-preview'>
    Contradict pious ubermensch salvation ascetic contradict pinnacle battle pious salvation overcome endless insofar truth. 
    <a href='https://www.example.com/bill-murray/'><img src='https://www.fillmurray.com/300/200' alt='' /></a>
    Fearful chaos of superiority depths snare chaos intentions law deceptions dead christianity. 
    Value self insofar snare evil depths ubermensch. God holiest oneself pinnacle hope ultimate 
    grandeur noble philosophy endless right disgust evil play. Christianity reason joy value ideal ocean dead 
    value ultimate virtues law. Virtues god madness ultimate eternal-return will.
</p>

<p class='artist-preview'>
    Transvaluation victorious christianity sea will merciful war marvelous joy joy dead of prejudice. 
    Value oneself salvation law marvelous selfish right marvelous free burying <a href='https://www.example.com/kitten/'>
    <img src='https://placekitten.com/300/200' alt='' /></a>decrepit selfish victorious. Mountains horror zarathustra 
    noble enlightenment will ocean god truth.
</p>

<p class='artist-preview'>
    Faith free gains contradict fearful deceptions enlightenment pious decrepit suicide convictions. Play 
    <a href='https://www.example.com/bacon/'><img src='https://baconmockup.com/300/200/' alt='' /></a>
    pious selfish against moral intentions abstract superiority selfish of ascetic burying. Philosophy good 
    aversion insofar mountains.
</p>

<p class='artist-preview'>
    Eternal-return salvation zarathustra christianity battle faith decieve holiest ascetic self. 
    <a href='https://www.example.com/random/'><img src='https://picsum.photos/300/200' alt='' /></a>Reason pinnacle 
    derive zarathustra disgust decieve hatred ideal burying holiest. Play endless ubermensch morality 
    mountains noble deceptions contradict.
</p>