Home > Enterprise >  Jquery get the href value of a div that has div sibling with particular class attributes
Jquery get the href value of a div that has div sibling with particular class attributes

Time:10-12

I have an html that has a div with particular class and text (in the case of the html file I am trying to work on: "All Information (Senate Website)" and the class is field__label. This particular div has a sibling or next element class "field__item" and this class field__item has a child a href. I am interested in getting the value of href attribute. How do I that with html below.

 <div data-quickedit-field-id="node/80559/field_a/en/full" >
    <div >All Information (Senate Website)</div>
              <div ><a href="http://legacy.senate.gov.ph/lis/bill_res.aspx?congress=14&amp;q=SBN-97">View</a></div>
          </div>

What works for me is using the .html function (see code below) but with this code, it is giving me: <a href="http://legacy.senate.gov.ph/lis/bill_res.aspx?congress=14&amp;q=SBN-97">View</a>. I am only interested with http://legacy.senate.gov.ph/lis/bill_res.aspx?congress=14&amp;q=SBN-97

jQuery(document).ready(function($){
  url_sb_all = $( "div.field__label:contains('All Information ')").nextAll().html();
alert (url_sb_all);
});

Using innerHTML, it is giving me undefined. And using like the one below, it is also giving me undefined.

jQuery(document).ready(function($){      
var url_sb_all = $("div.field__label:contains('All Information ')" > "div.field__item a:contains('View')").prop('href');    
alert (url_sb_all);    
});

CodePudding user response:

This is as simple as I can get it

const url = $(".field__label:contains('All Information (Senate Website)')")         // the div containing your text
  .next()        // the next sibling
  .find("a")     // the link in that sibling
  .prop("href"); // prop() or attr()
console.log(url)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<div data-quickedit-field-id="node/80559/field_a/en/full" >
  <div >All Information (Senate Website)</div>
  <div ><a href="http://legacy.senate.gov.ph/lis/bill_res.aspx?congress=14&amp;q=SBN-97">View</a></div>
</div>

  • Related