Question

我有一个像这样的嵌套元素。

<hero id="1">
    <hero id="2">
        <hero id="3">
           <hero id="4"></hero></hero>
    </hero>
</hero>

我将此作为jquery element对象。

我想获得或预约循环这些项目。

$(element).each(function(){
    // get items with order 1, 2, 3, 4
})

我如何获得每件物品？

Answer 1

如果您只想返回ID数组，可以使用map()和get()

var ids = $('hero').andSelf().map(function() {
  return $(this).find('hero').attr('id')
}).get()

console.log(ids)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<hero id="1">
  <hero id="2">
    <hero id="3">
      <hero id="4"></hero>
    </hero>
  </hero>
</hero>

如果您想选择每个元素，可以使用find()和each循环。

var ids = $('hero').andSelf().find('hero').each(function() {
  console.log($(this).attr('id'))
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<hero id="1">
  <hero id="2">
    <hero id="3">
      <hero id="4"></hero>
    </hero>
  </hero>
</hero>

Answer 2

有两种方法可以做到这一点，一种是通过ID递归另一种方式。

如果您知道ID，可以通过以下方式轻松完成：

// if you know ids
$('#1, #2, #3, #4').each(function (index, element) { ... });

// if you know the class/element name etc.
$('hero').each(function (index, element) { ... });

另一种方法是通过递归：

function getHero($elements) {
  // do stuff with element

  if ($elements.children('hero').length) {
    getHero($elements.children('hero'));  // recursively call getHero with all immediate children
  }
}

getHero($('#1'));

jquery嵌套元素循环每个项目

2 个答案: