10-jQuery-遍历children、parent、for、each、for...of等

1、for 循环：可以用来遍历数组或类数组对象，但不能用来遍历普通对象。

<ul>
  <li>John</li>
  <li>Doe</li>
  <li>Jane</li>
  <li>Doe</li>
</ul>

<script>
  var lis = $('li');
  for (var i = 0; i < lis.length; i++) {
    console.log(lis[i].textContent);
  }
</script>

上述代码表示：通过 $ 函数选择所有 li 元素，并将它们存储在变量 lis 中。然后使用 for 循环遍历 lis 数组，打印出每个 li 元素的文本内容。

2、each() 方法：可以遍历任何类型的集合，包括普通对象、数组和类数组对象。

<ul>
  <li id="1">John</li>
  <li id="2">Doe</li>
  <li id="3">Jane</li>
  <li id="4">Doe</li>
</ul>

<script>
  $('li').each(function(index, element) {
    console.log(index + ':' + $(element).text());
  });
</script>

上述代码表示：使用 $ 函数选择所有 li 元素，并使用 each() 方法遍历它们。each() 方法接受一个函数作为参数，在每个元素上执行该函数。这个函数包含两个参数：元素的索引和元素本身。在示例代码中，使用 console.log() 打印每个 li 元素的索引和文本内容。

3、for...of 循环是 ES6 引入的一种新的循环语法，可以用来遍历所有可迭代对象，包括数组、类数组对象和字符串等。

<div class="container">
  <div>John</div>
  <div>Doe</div>
  <div>Jane</div>
  <div>Doe</div>
</div>
<script>
  var container = $('.container');
  for (var element of container.children()) {
    console.log($(element).text());
  }
</script>

上述代码表示：通过 $ 函数选择 container 元素，并使用 children() 方法获取它的所有子元素。然后使用 for...of 循环遍历所有子元素，并打印出它们的文本内容。需要注意的是，for...of 循环中的 element 变量是 DOM 元素，需要使用 $ 函数将其转换成 jQuery 对象才能进行相关操作。

4、children() 方法返回当前元素的所有子元素，可以带一个可选的选择器参数进行筛选。

<div class="container">
  <p>John</p>
  <p>Doe</p>
  <p>Jane</p>
  <p>Doe</p>
<