Question

说我有像这样的HTML

<div class='parent'>
    <div class='dad'>
        <div class='teen'>
            <div class='baby'>
            </div>
        </div>
    </div>
    <div class='dad'>
    </div>
</div>

如何根据div与父级的距离来定位div？例如.baby前面有3个父母，而.teen前面有2个父母。有什么办法吗？因为我最终想做的是针对每个第二个孩子（）。因此，在这种情况下，我想选择.dad和.baby。但是我不想选择固定数量，我希望它能无限地选择DOM树中的每个第二个子（）。

Answer 1

＆＃13;

var $result = $("div").filter(function() {
  return $(this).parents("div").length % 2 != 0; // if the number of div parents is not a pair number
});

$result.each(function() {
  $(this).css("background", "red");
});

＆＃13;

div {
  border: 1px solid black;
  background: white;
  padding: 10px;
  margin: 10px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <div>
    <div>
      <div>
      </div>
      <div>
        <div>
        </div>
      </div>
    </div>
  </div>
  <div>
  </div>
</div>

＆＃13;

注意：如果您想要包含所有父母，请使用以下内容：

return $(this).parents().length % 2 != 0;

Answer 2

这个是使用jquery：奇数选择器。

$（“div：odd”）。css（“background-color”，“yellow”）;
$（“div：even”）。css（“background-color”，“green”）;

此处备用div的颜色不同。

Answer 3

我认为nth child selector应该做到这一点。

相关documentation

示例：

$("p:nth-child(3)")

上面的代码段会选择每个<p> element，它是其父级的第三个子级。您可以使用选择器和值来获得乐趣。 CSS选择器的进一步reference。

Answer 4

function nthLevelChield(n){
    var targetedNode=$('.parent');
    for(var i=0; i<n ; i++){
         targetedNode=targetedNode.children().eq(0);
       }
    return targetedNode;
}

n 是子级变量。

Answer 5

你可以这样做单个div -

 $('.dad').children().children().eq(0);

如果你有一个以上的div而且你需要所有你可以尝试这个 -

$('div').each(function(){
$(this).children().children().eq(0);
})

如何根据DOM树中的位置选择子项

5 个答案: