Question

我有以下情况。我想使用jquery访问所有＆＃34; nth＆＃34; 子项。

＆＃13;

<div id="root">
    <div id="block">
       <div>level 1
           <div>level 2</div>
           <div>level 3
               <div>level 3.1</div>
               <div>level 3.2</div>
           </div>
           <div>level 4
               <div>level 4.1
                   <div>level 4.1.1</div>
               </div>
               <div>level 4.2</div>
           </div>
       </div>
       <div>level 1
           <div>level 2
               <div>level 3
                   <div>level 3.1</div>
               </div>
               <div>level 4</div>
           </div>
           <div>level 5</div>
       </div>
       <div>level 1
           <div>level 2</div>
           <div>level 3
               <div>level 3.1</div>
               <div>level 3.2</div>
           </div>
           <div>level 4
               <div>level 4.1</div>
               <div>level 4.2</div>
           </div>
           <div>level 5</div>
       </div>
    </div>
</div>

＆＃13;

我有_div = $（＆＃34;＆＃34;）。appendTo（＆＃34; #root＆＃34;）; 现在我想通过它访问第十级孩子。 _nth可以是＆gt; 2/3/4 例如：我想访问_div的3级孩子，即3.1级，3.2级等。我该如何访问它？请帮忙。

Answer 1

$( "#root div:nth-child(2)" )

会给你

<div>level 3
   <div>level 3.1</div>
   <div>level 3.2</div>
</div>

Answer 2

我有一种感觉，您可能需要查看您的HTML结构，因为我不认为它能够满足您的期望。

话虽这么说，我已经创建了JSFiddle供您玩，并根据需要进行修改。我添加了一些CSS来直观地组织它。

基本上你的代码看起来像是这样来抓住nth-child中的所有东西：

var blockChild = 2;
$("#block div").find(":nth-child(" + blockChild + ")").css( "background-color", "yellow" );

我不认为这是你想要的，所以简单地在jQuery中添加一个.children（）可以获得所选nth-child中的所有内容（IE上面引用的3.1和3.2但不是3级＆＃34;标题＆＃34;）

var blockChild = 2;
$("#block div").find(":nth-child(" + blockChild + ")").children().css( "color", "red" );

您不需要使用该变量，并且可以对第n个孩子进行硬编码，但听起来您可能想要动态更改它。

话虽这么说，你的div的嵌套有点不一致。你窝3级＆amp; 4进入第二个区块的第2级，但不是第一个或最后一个。也许这只是一个副本和粘贴错误。如果没有按预期工作，我很乐意进一步提供帮助。

希望这有帮助！

使用jquery获得n级孩子

2 个答案: