具有jQuery数据属性的每个循环都无法正常工作

Question

<ul class='list-container'>
<li class='list-item' data-level='parent_level'>
    <ul>
        <li data-level='child_level'> Child 1</li>
        <li data-level='child_level'> Child 2</li>
    </ul>
</li>

<li class='list-item' data-level='parent_level'>
    <ul>
        <li data-level='child_level'> Child 3</li>
        <li data-level='child_level'> Child 4</li>
    </ul>
</li>

这是我的HTML代码。

我想打印子列表中的每个元素。我想使用相同的数据属性。 我尝试用类获取元素。它工作正常。

var list = $('list-container');
list.each(function(){console.log($(this).html())});

使用此代码，我在输出中获得了HTML内容。

 <li class="list-item" data-level="parent_level">
  <ul>
    <li data-level="child_level"> Child 1</li>
    <li data-level="child_level"> Child 2</li>
  </ul>
</li>


<li class="list-item" data-level="parent_level">
  <ul>
    <li data-level="child_level"> Child 3</li>
    <li data-level="child_level"> Child 4</li>
  </ul>
</li>

当我使用数据属性尝试相同的事情时，如下所示：

var list= $.find("[data-level='parent_level']");
list.forEach(function(){console.log($(this).html())});

日志输出是'未定义'。

用“.each”替换“.forEach”，错误为“.each不是函数”。

list.each(function(){console.log($(this).html())});

Answer 1

您的脚本中存在一些选择器问题，请查看下面的更新代码段。

var list = $('.list-container');
list.each(function(){console.log($(this).html())});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class='list-container'>
<li class="list-item" data-level="parent_level">
  <ul>
    <li data-level="child_level"> Child 1</li>
    <li data-level="child_level"> Child 2</li>
  </ul>
</li>
</ul>


<li class="list-item" data-level="parent_level">
  <ul>
    <li data-level="child_level"> Child 3</li>
    <li data-level="child_level"> Child 4</li>
  </ul>
</li>

Answer 2

您无需使用.find()，只需将其称为var list = $("[data-level='parent_level']");

即可

更好的是，$("[data-level='parent_level']").each()会为您节省一条线。

如果您不想要当前打印的ul，请写下：$("[data-level='parent_level'] ul")

＆＃13;

＆＃13;

var list = $("[data-level='parent_level']");


list.each(function() {
  console.log($(this).html())
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class='list-container'>
  <li class='list-item' data-level='parent_level'>
    <ul>
      <li data-level='child_level'> Child 1</li>
      <li data-level='child_level'> Child 2</li>
    </ul>
  </li>

  <li class='list-item' data-level='parent_level'>
    <ul>
      <li data-level='child_level'> Child 3</li>
      <li data-level='child_level'> Child 4</li>
    </ul>
  </li>
</ul>

＆＃13;

＆＃13;

＆＃13;