Jquery：迭代通過Divs和ULs和檢索

Question

卡住與jQuery的一點。 我通過幾個div的具有相同結構必須循環和需要<h1>標籤內的文本以及每一個<li>與類「.checked」

<div id="a21315" class="content gradient"> 
<div class='header gradient'> 
    <div class='headimg'></div> 
    <h1>Input Shaft Size</h1> 
    <div class="minus_sprite "></div> 
    <ul class="de-radio "> 
     <li id="a22134340"><span class='checked'>0.4375" X 0.88"</li> 
     <li id="a22151870"><span class=''>0.500" X 1.13"</li> 
     <li id="a22168545"><span class=''>0.625" X 1.50"</li> 
     <li id="a22172070"><span class=''>0.625" X 1.57"</li> 
     <li id="a22184915"><span class=''>0.750" X 1.57"</li> 
     <li id="a22946970"><span class=''>0.875" X 1.97"</li> 
    </ul> 
</div> 

我期待這樣的結果，並且希望在另一個複製此div（#overview）。

Text from Headline 1 
-List Element with checked Class 1 
-List Element with checked Class 2 
-List Element with checked Class 3 

Text from Headline 2 
-List Element with checked Class 1 
-List Element with checked Class 2 
-List Element with checked Class 3 
etc. 

與此$('.content.gradient:not(.hidden) h1').text();我收到的每一標題（） 和與該行： $('.content.gradient:not(.hidden) ul li.checked span').not('.hidden').text();

我接收到的所有選擇<li>與.checked類。但是，我怎樣才能循環所有這些，並得到它？

我希望我描述了我的問題可以理解。

Answer 1

但我怎麼能循環throught這一切

你可以這樣做：

var $overview = $('#overview'); 
$('.content.gradient:not(.hidden)').find('.header.gradient').each(function(){ 
    var headingText = $(this).find('h1').text(); 
    var $checkedItems = $(this).find('span.checked').not('.hidden'); 
    var checkedItemsText = ''; 
    $checkedItems.each(function(){ 
     checkedItemsText += $(this).text() + '<br/>'; 
    }); 
    $overview.append(headingText + '<br/>' + checkedItemsText); 
}); 

編輯：

對不起，發幾個錯別字 - 上面是現在正確。下面是a working demo.

編輯2：

爲了獲得更好的性能，是很好的緩存#overview - 更新上面的代碼。

Answer 2

的你是如何寫的一行簡單的錯誤：

$('.content.gradient:not(.hidden) ul li .checked').not('.hidden').text() 

當你沒有你的LI的一個檢查類，只是在跨度裏面，你需要你的力和你之間的空間類選擇。

此外，您必須關閉您的SPAN標籤！

<ul class="de-radio "> 
    <li id="a22134340"><span class='checked'>0.4375" X 0.88"</span></li> 
    <li id="a22151870"><span class=''>0.500" X 1.13"</span></li> 
    <li id="a22168545"><span class=''>0.625" X 1.50"</span></li> 
    <li id="a22172070"><span class=''>0.625" X 1.57"</span></li> 
    <li id="a22184915"><span class=''>0.750" X 1.57"</span></li> 
    <li id="a22946970"><span class=''>0.875" X 1.97"</span></li> 
</ul> 

否則，你一定會遇到解析麻煩。

編輯：（和的jsfiddle啓動http://jsfiddle.net/mori57/pHEhK/！）

首先，你真的要清理您的標記，或者就此永遠工作的權利。閉上你的div，關閉跨度：

<div id='main'> 
    <div id="a21315" class="content gradient"> 
     <div class='header gradient'> 
      <div class='headimg'></div> 
      <h1>Input Shaft Size</h1> 
      <div class="minus_sprite "></div> 
      <ul class="de-radio "> 
       <li id="a22134340"><span class='checked'>0.4375" X 0.88"</span></li> 
       <!-- snip ... see jsFiddle --> 
      </ul> 
     </div> 
    </div> <!-- missing a closing div --> 
    <div id="a21315" class="content gradient"> 
     <div class='header gradient'> 
      <div class='headimg'></div> 
      <h1>another Headline</h1> 
      <div class="minus_sprite "></div> 
      <ul class="de-radio "> 
       <li id="a22134341"><span class='checked'>another checked item"</span></li> 
       <!-- snip ... see jsFiddle --> 
      </ul> 
     </div> 
    </div> <!-- you're missing a closing div tag --> 
</div> 
<div id="output"></div> 
​ 

我添加了一個輸出div來給你舉個例子地方放你輸出項目。現在

，爲您的jQuery：

// First, get a collection of your content blocks 
var $blocks = $(".content.gradient:not(.hidden)"); 
// get a reference to the div you want to spit all this out into 
var $out = $("#output"); 

// iterate through each of the non-hidden blocks 
$blocks.each(function(){ 
    // it occurs to me that we should cache $(this) since 
    // we're accessing it multiple times 
    var $this = $(this); 
    // get a ref to the h1 from this block's h1 
    var this_h1 = $this.find(".header:not(.hidden) h1"); 
    // get a ref to the .checked li from this block 
    var this_checked = $this.find(".header:not(.hidden) .checked"); 
    // if this_h1 contains a result, append it to the output div 
    if(this_h1) { 
     $out.append(this_h1.clone());    
    } 
    // if this_checked contains a result, 
    //append that out in the output div, too   
    if(this_checked){ 
     $out.append(this_checked.clone());    
    } 
}); 

​ 

我加了一點風格，在的jsfiddle，所以你可以很容易地看到該代碼被輸出。