Skip to main content
WolfShade
WolfShade
Legend
October 17, 2018
Answered

jQuery question: sibling element selector

  • October 17, 2018
  • 1 reply
  • 572 views

Hello, all,

I'm working on a project that will test the links on every page to make sure they all work.  I won't go into detail on what it's doing, but I need help on displaying the statusCode that is returned as a result.

I'm dynamically building something like the following:

<div class="linebyline">
     <div class="leftDiv" id="status_0">?</div>
     <div class="rightDiv" id="url_0">https://www.google.com</div>
</div>
<div class="linebyline">
     <div class="leftDiv" id="status_1">?</div>
     <div class="rightDiv" id="url_1">https://www.yahoo.com</div>
</div>
<div class="linebyline">
     <div class="leftDiv" id="status_2">?</div>
     <div class="rightDiv" id="url_2">https://www.sddc.com</div>
</div>

Now, after this is built, I'm grabbing the URL in the rightDiv div, using $.ajax() to get the page, and I'm getting the xhr.status.  I can alert it, no problem.  But what I'm trying to do is get the leftDiv that is within the same wrapper linebyline div to set the html() value.

The following is _not_ working:

).done(function(data,statusText,xhr){
     $.prev('.leftDiv').html(xhr.status);
     });

What is the best way to get the proper leftDiv element???

V/r,

^ _ ^

PS.. I also tried $(this).prev('.leftDiv'), but that didn't work, either.

    This topic has been closed for replies.
    Correct answer WolfShade
    WolfShade  wrote

    So, when the results come back (testing with five - three good ones, two bad), each FQDN is paired with a question mark that is supposed to change to the statusCode and statusText when the site returns.  Bad URLs will keep the question mark.  Then I remove the click event so no one can click on a URL and resend the request.

    So someone clicks on the 'rightDiv' to find out the staus of the url as an example.

    Some how you are checking the status of each url  when the 'rightDiv' is clicked? If the status is 'true' you want to add some text to the 'leftDiv' but if the staus is 'false' you just want to leave ? in the 'leftDiv':

    $('.rightDiv').css('cursor' , 'pointer').click(function(){

    $(this).each(function(){

    var statusText = true;

    var url = $(this).text();

    if(statusText == true) {

    $(this).prev('div').html(url);

    }

    });

    Not sure if this gets you any further forward as its difficult to know exactly what you are doing.


    Here is the code that wound up working (added line 13 and changed line 15):

    function submitForm(){  
        $.post(  
              "components/hcs.cfc?method=startLinkCheck",  
              {'thisPath':$sitesApps.val()} //This is the value of a drop down select  
              ).done(  
                  function(data){  
                        $mcDiv.html(''); // Links appear in a div named mcDiv  
                        var data = data.split("|"); // Links are a pipe-delimited list, converting to an array so I can use .map()  
                        data.map(function(v,index){  
                            $mcDiv.html($mcDiv.html() + '<div class="linebyline"><div class="leftDiv" id="status_' + index + '">?</div><div class="rightDiv" id="url_' + index + '">' + v + '</div>');  
                            });  
                        $('.rightDiv').on('click',function(){  
                var leftID = $(this).prev().attr('id'); // ADDED THIS!
                            $.ajax({url: "" + $(this).html() + ""}).done(function(data,statusText,xhr){  
                                  $('#' + leftID).text(xhr.status + " " + statusText);//  <--- WORKING!
                                  });  
                            }).click().prop('onclick',null).off('click');  
                        });}

    Setting the prev() id before the $.ajax() and referencing that worked.

    HTH,

    ^ _ ^

    1 reply

    O
    osgood_
    Legend
    October 17, 2018

    Does this work for your  - note this line in particular: $('.rightDiv').prev('div').html(url);

    Example jquery:

    $('.clickMe').css('cursor' , 'pointer').click(function(){

    var url = $('.rightDiv').text();

    alert(url);

    $('.rightDiv').prev('div').html(url);

    });

    <a href="#" class="clickMe">Click Me</a>

    <div class="linebyline"> 

    <div class="leftDiv" id="status_1">?</div> 

    <div class="rightDiv" id="url_1">https://www.yahoo.com</div> 

    </div>

    WolfShade
    WolfShadeAuthor
    Legend
    October 17, 2018

    Hi, osgood_,

    I copied your example into a blank document and tested it, and yes it worked.

    But that is with just one linebyline div.  This could potentially generate hundreds or thousands of linebyline divs (our restricted site is quite huge.)

    I'll provide some more code:

    function submitForm(){
         $.post(
              "components/hcs.cfc?method=startLinkCheck",
              {'thisPath':$sitesApps.val()} //This is the value of a drop down select
              ).done(
                   function(data){
                        $mcDiv.html(''); // Links appear in a div named mcDiv
                        var data = data.split("|"); // Links are a pipe-delimited list, converting to an array so I can use .map()
                        data.map(function(v,index){
                             $mcDiv.html($mcDiv.html() + '<div class="linebyline"><div class="leftDiv" id="status_' + index + '">?</div><div class="rightDiv" id="url_' + index + '">' + v + '</div>');
                             });
                        $('.rightDiv').on('click',function(){
                             $.ajax({url: "" + $(this).html() + ""}).done(function(data,statusText,xhr){
                                  $.siblings().text(xhr.status + " " + statusText);//  <--- not working.
                                  });
                             }).click().prop('onclick',null).off('click');
                        });}

    So, when the results come back (testing with five - three good ones, two bad), each FQDN is paired with a question mark that is supposed to change to the statusCode and statusText when the site returns.  Bad URLs will keep the question mark.  Then I remove the click event so no one can click on a URL and resend the request.

    V/r,

    ^ _ ^

    O
    osgood_
    Legend
    October 17, 2018
    WolfShade  wrote

    So, when the results come back (testing with five - three good ones, two bad), each FQDN is paired with a question mark that is supposed to change to the statusCode and statusText when the site returns.  Bad URLs will keep the question mark.  Then I remove the click event so no one can click on a URL and resend the request.

    So someone clicks on the 'rightDiv' to find out the staus of the url as an example.

    Some how you are checking the status of each url  when the 'rightDiv' is clicked? If the status is 'true' you want to add some text to the 'leftDiv' but if the staus is 'false' you just want to leave ? in the 'leftDiv':

    $('.rightDiv').css('cursor' , 'pointer').click(function(){

    $(this).each(function(){

    var statusText = true;

    var url = $(this).text();

    if(statusText == true) {

    $(this).prev('div').html(url);

    }

    });

    Not sure if this gets you any further forward as its difficult to know exactly what you are doing.

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices