Question posted in
You can find the official documentation here.

How can I loop through the anchor links that wrap around and image and ajax load some content into the figcaption element? – Jquery ajax

can someone help me with an issue I’m having where I think my understanding of the $this keyword in JQuery is somewhat lacking? I have 3 images on a page and each of these are wrapped in an anchor link. I want to to loop through and get the url of the anchor link, then using .load I want to ajax load some content from that url and place it in the figcaption element for that image. I was certain that the following code would work, but what this does is replace the image with the ajax loaded content, not place the content inside the figcaption. It’s driving me crazy! This is what I have so far…

    $( ".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");
    });
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I was able to answer this myself. The issue was that the figcaption is not part of $(this) it's actually a sibling so by changing the last line so it uses .sibling() I was able to get this working.

    Here's the solution I've used. This also limits the characters and makes the entire containing element clickable so the user can access the interior landing page.

        $( 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;
    });

});

  2. 0

    Unless you are fixed using jQuery then perhaps the following vanilla javascript might be of interest. I made certain assumptions as certain details were lacking from the question in terms of the markup of the source 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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search