选择具有某个类的所有元素以及具有特定ID的父元素

Question

In the HTML below I'm trying to create a list with all innerHTML of <h3> but the condition is that the parent div has to be with the id I passed to it.

<div id="site_somesite.com" class="wrapperSite">
   <h2 class="siteName">somesite.com</h2>
   <div class="placementWrapper">
          <h3 class="placementName" title="above_01"> above_comments_01</h3>
   </div>
   <div class="placementWrapper">
          <h3 class="placementName" title="above_02"> above_comments_02</h3>
   </div>
</div>
<div id="site_anothersite.com" class="wrapperSite">
   <h2 class="siteName">anothersite.com</h2>
   <div class="placementWrapper">
          <h3 class="placementName" title=below_01"> above_comments_01</h3>
   </div>
   <div class="placementWrapper">
          <h3 class="placementName" title="below_02"> above_comments_02</h3>
   </div>
</div>

and this is the piece of jQuery code I have so far:

   $('.sitePick').click(function(event){
     var placements = ['<ul>'];
     $('.wrapperSite').css("display", "none");
     var site = event.target.hash.replace(/\./, "\\."); // get the id
     console.log(site);
     $(site).show();
     var filter = site.replace('#', '').replace(/\\/g,"").trim(); //
     $('.placementName').each(function(){
       placements += '<li>' + $.trim(this.innerHTML) + '</li>';
     })
     placements += '</ul>';
  });

In this function filter holds the id I want to use but I don't know how to use it to select all elements with the class placementName . To make it a bit more clear...how can I create a list with all <h3> under the div with the id="site_anothersite.com" ?

Thanks!

Answer 1

You need to modify your code to:

var filter = site.replace('#', '').replace(/\\/g,"").trim(); //
$('#'+filter+' .placementName').each(function(){
   placements += '<li>' + $.trim(this.innerHTML) + '</li>';
});

or

Use .site object and finds .placementName elements in it:

$(site).find('.placementName').each(function(){
   placements += '<li>' + $.trim(this.innerHTML) + '</li>';
});

Answer 2

how can I create a list with all <h3>

It should be:

$('.sitePick').click(function(event){
     var placements = $('<ul>'); // <-----create object here
     $('.wrapperSite').css("display", "none");
     var site = event.target.hash.replace(/\./, "\\."); // get the id
     console.log(site);
     $('#'+site).show(); // <-----------i guess you need a id selector here
     var filter = site.replace('#', '').replace(/\\/g,"").trim(); //
     $('#'+filter).find('.placementWrapper .placementName').each(function(){ // loop over here
       placements.append('<li>' + $.trim(this.innerHTML) + '</li>');
     });
     $('#'+filter).find('.placementWrapper').append(placements); //<---put it here
});

Answer 3

yes you have to use site object as it is working and find h3 object then grab the value like this:

$('document').ready(function() {
   $('.sitePick').click(function(event){
   var placements = ['<ul>'];
   $('.wrapperSite').css("display", "none");
   var site = event.target.hash.replace(/\./, "\\."); // get the id
   console.log(site);
   $(site).show();
   $(site).find("h3").each(function(){
     placements += '<li>' + $.trim(this.innerHTML) + '</li>';
   });

  placements += '</ul>';
  console.log (placements);
  });  

});

your html has typos:

    <div id="site_somesite.com" class="wrapperSite">
   <h2 class="siteName">somesite.com</h2>
   <div class="placementWrapper">
      <h3 class="placementName" title="above_01"> above_comments_01</h3>
   </div>
   <div class="placementWrapper">
      <h3 class="placementName" title="above_02"> above_comments_02</h3>
   </div>
   </div>
   <div id="site_anothersite.com" class="wrapperSite">
  <h2 class="siteName">anothersite.com</h2>
  <div class="placementWrapper">
      <h3 class="placementName" title="below_01"> above_comments_01</h3>
  </div>
  <div class="placementWrapper">
      <h3 class="placementName" title="below_02"> above_comments_02</h3>
  </div>
  </div>
  <a class="sitePick" href="#site_anothersite.com" >click to target     site_anothersite.com</a>

Jsfiddle : https://jsfiddle.net/kodedsoft/tu7cmqqz/3/