javascript - 选择具有某个类和具有特定 id 的父级的所有元素

Question

在下面的 HTML 中，我尝试创建一个包含所有 innerHTML 的列表。的<h3>但条件是父 div 必须是我传递给它的 id。

<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>

这是我到目前为止的 jQuery 代码:

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

在此函数中，过滤器保存了我想要使用的 id，但我不知道如何使用它来选择类 placementName 的所有元素。 。 为了让它更清楚一点......我怎样才能创建一个包含所有 <h3> 的列表在带有 id="site_anothersite.com" 的 div 下？

谢谢!

Answer 1

您需要将代码修改为:

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

或

使用 .site 对象并在其中查找 .placementName 元素:

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