Question

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

<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>在div下创建包含所有id="site_anothersite.com"的列表？

谢谢！

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

Answer 2

如何创建包含所有<h3>
的列表

应该是：

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

是的，您必须使用站点对象，因为它正在工作并找到h3对象然后抓住这样的值：

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

});

你的HTML有拼写错误：

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

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

3 个答案: