Question

HTML

＆＃13;

$(".something > ol li").each(function () {
  alert($(this).text());
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="something">
  <ol>
    <li>Something</li>
    <ol>
      <li>Something 2</li>
    </ol>
    <li>Something 3</li>
  </ol>
</div>

＆＃13;

它会提醒Something，Something 2和Something 3。

我需要的是仅提醒直接子项。所以我只需要警告Something and Something 3.

我该怎么做？

非常感谢！

Answer 1

您的原始选择器已关闭。选择器A > B匹配A的匹配B的直接子项，而不是遍历所有后代。

因此，以下内容适用于您：

$(".something > ol > li").each(function () {
  alert($(this).text());
});

Answer 2

仅从li获取ol childrens。这样，您将跳过列表中的其他标记。

＆＃13;

$(".something > ol").children('li').each(function () {
  alert($(this).text());
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="something">
  <ol>
    <li>Something</li>
    <ol>
      <li>Something 2</li>
    </ol>
    <li>Something 3</li>
  </ol>
</div>

＆＃13;

Answer 3

您的HTML无效。 <ol>不能直接包含其他<ol>。资料来源：w3.org。您需要将其嵌套在<li>：

中

<div class="something">
  <ol>
    <li>Something
        <ol>
          <li>Something 2</li>
        </ol>
    </li>
    <li>Something 3</li>
  </ol>
</div>

接受的答案将不再起作用，因为所有子元素的文本将由text（）返回。有一种肮脏的方式来获得直接孩子李的文字：

$(".something > ol > li").each(function () {
    var text = $(this).clone()
        .children()
        .remove()
        .end()
        .text();
  alert(text);
});

但我推荐一种更简洁的方法，将文字包装在一个范围内：

<div class="something">
  <ol>
    <li><span>Something</span>
        <ol>
          <li>Something 2</li>
        </ol>
    </li>
    <li>Something 3</li>
  </ol>
</div>

现在这个JS会起作用：

$(".something > ol > li > span").each(function () {
  alert($(this).text());
});

有序列表只获得子项

3 个答案: