Question

我想遍历div中的所有元素。我使用此代码进行了尝试，但只返回了主/起始div。

此代码有什么问题？

<div id="startcontainer">
  <div>anotherone</div>
  <div>
    one more <span>a span tag<a href="">href tag</a></span>
  </div>

  $('#startcontainer').each(function(index, value){ console.log(index+''+value+'-> id:'+$(this).attr("id")+'
  tag:'+$(this).prop("tagName")); });
</div>

Answer 1

您有孩子 https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/children

喜欢

var foo = document.getElementById('startcontainer');
for (let i = 0; i < foo.children.length; i++) {
  console.log(foo.children[i].tagName);
}

在jquery中，您可以从中获得想法 https://api.jquery.com/children/

Answer 2

您可能必须尝试这种方式。

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div id="startcontainer">
      <div>anotherone</div>
      <div>
        one more <span>a span tag<a href="">href tag</a></span>
      </div>
    </div>
    
    <script>
            $('#startcontainer').children().each(function(index, value){
           console.log(index, " ", value)
        });
        </script>

Reference

Answer 3

您需要递归搜索，在此我举了一个例子。

var foo = document.getElementById('startcontainer');

function search(element){

$(element).children().each(function(index, item){
console.log(item.tagName);
search(item) // Search agen for children, this is recursive search so it will go throw each element and its cheldren
});
}

search(foo)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="startcontainer">
  <div>anotherone</div>
  <div>
    one more <span>a span tag<a href="">href tag</a></span>
  </div>
 </div>

如何循环遍历div中的所有元素

3 个答案: