選擇具有特定ID的某些類和父級的所有元素

在下面的HTML中，我試圖創建一個包含<h3>的所有innerHTML的列表，但條件是父級div必須使用傳遞給它的ID 。選擇具有特定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的所有元素。爲了讓它更清晰一點......我如何創建一個列表與id="site_anothersite.com"的div下的所有<h3>？

謝謝！

來源

2016-01-11 yariv bar

使用id「site_somesi te.com「將打破jQuery或'document.querySelector'函數以及您的css規則。你應該刪除點，並使用像「site_somesitecom」 – synthet1c

您需要修改您的代碼：

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

來源

2016-01-11 08:40:36

我怎麼可以創建一個列表與所有<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 
});

來源

2016-01-11 08:46:34 Jai

是你必須使用站點對象，因爲它是工作，發現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/

來源

2016-01-11 09:28:00 uzma

選擇具有特定ID的某些類和父級的所有元素

回答

相關問題