如何獲得父母的「直接」子女？

Question

具有HTML結構是這樣的：

<div id="parent1" class="parent"> 
    <div class="child">1<div/> 
    <div> 
     <div class="child">2</div> 
    </div> 

    <div id="parent2" class="parent"> 
     <div class="child">3</div> 
     <div> 
     <div class="child">4</div> 
     </div> 
     <div id="parent3" class="parent"> 
     <div class="child">5</div> 
     </div> 
    </div> 
</div> 

我怎麼能寫僅返回指定的父的直接孩子一個選擇？ 所以對於parent2我想孩子3和4的孩子而不是孩子5.

Answer 1

你的問題是有點混亂，我認爲選擇會根據你的實際的HTML，但我認爲這應該爲您的具體實例工作：

http://jsfiddle.net/4ZQ4C/

$('.parent .child:not(".parent .parent .child")').addClass('selected'); 

Answer 2

CSS容易

.parent > .child 

http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/

Answer 3

爲jQuery，children()將遍歷DOM的一個級別。

$('.parent').children('.child').each(function() { 

    // do something with each of the direct decedents 

}); 

在你的情況，這將意味着你將返回「第一」 .child和「第三」 .child項，頂部至底部在HTML讀取。

Answer 4

試試這個http://jsfiddle.net/9sSqE/

或者可以使用closesthttp://api.jquery.com/closest/演示http://jsfiddle.net/T26Sa/

希望這會適合您的需要:)

代碼

$('.parent').each(function() { 
    $(this).find('.child').html('HULK ---- Found'); 
    alert($(this).html()); 
});