這個nth-child爲什麼會返回一個意外的元素？

html & jQuery在下面，它也在http://www.jsfiddle.net/4fWUU。我期待得到'wrapper'的第二個孩子，它是id爲'parent2'的div。但是，返回的ID是'child1_1_1_2'，我不期望。這個nth-child爲什麼會返回一個意外的元素？

我可以使用$o1.children()[1]得到正確的div，但我想知道爲什麼nth-child不能正常工作。

任何想法爲什麼？

<div id="wrapper"> 
     <div id="parent1"> 
      <div id="child1"> 
       <div id="child1_1"> 
        <div id="child1_1_1"> 
         <div id="child1_1_1_1"> 
         </div> 
         <div id="child1_1_1_2"> 
         </div> 
        </div> 
        <div id="child1_1_2"> 
        </div> 
       </div> 
       <div id="child1_2"> 
        <div id="child1_2_1"> 
        </div> 
       </div> 
      </div> 
     </div> 
     <div id="parent2"> 
     </div> 
    </div> 


var $o1 = $("#wrapper"); 
var id = $("div:nth-child(2)",$o1).attr("id"); 

alert(id);

來源

2011-02-08 Tony_Henrich

$（「> div：nth-child（2）」，$ o1）`將會是要走的路，或者更簡單：`$（「＃wrapper> div：nth-child（2）」）``。 – 2011-02-08 19:36:54

上下文搜索相同.find()，其拾取向上行進DOM樹之前最深後代第一。 :nth-child()不關心父母，如果你沒有指定一個父母，因此每div包含（由（的孩子）#wrapper的某個其他元素或任何內部被選中。

.children()方法，正如它在錫上所說的，限制了對元素的選擇，所以匹配的任何東西都是孩子。就用它來，但經過:nth-child()選擇像這樣：

var id = $o1.children('div:nth-child(2)').attr('id');

或者尼克Craver表明，使用子選擇器>限制你的上下文搜索到的#wrapper孩子：如果你只希望當前

var id = $('> div:nth-child(2)', $o1).attr('id');

來源

2011-02-08 19:38:10 BoltClock

有實際上是選擇器的4個實例：

var $o1 = $("#wrapper"); 
$("div:nth-child(2)",$o1).each(function() { 
     alert($(this).attr("id")); 
});

來源

2011-02-08 19:36:56

這個nth-child爲什麼會返回一個意外的元素？

回答

相關問題