如何删除ol child在jquery中没有li的li元素?

Houy Narun • 6 年前 • 2156 次点击

使用下面给出的代码,我想删除其子元素为 ol 元素不包含任何 li 元素,但没有效果。

$(document).ready(function() {
  $('#myUL li').each(function() {
    var lenLi = $(this).find('ol').children('li').length;
    if (lenLi == 0) {
      $(this).remove();
    }
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<ol id="myUL">
  <li>Hello 1</li>
  <li>Hello 2
    <ol></ol>
  </li>
  <li>Hello 3
    <ol>
      <li>Hello 3.1</li>
      <li>Hello 3.2</li>
      <li>Hello 3.3</li>
    </ol>
  </li>
</ol>

在执行上述代码后,hello 1和hello 2被删除。然而,hello 3的孩子们也都被删除了。

我的问题是为什么?

Python社区是高质量的Python/Django开发社区
本文地址：http://www.python88.com/topic/47216

文章 [ 4 ] | 最新文章 6 年前

• 1 楼

Hien Nguyen 6 年前

您可以使用查询选择器 #myUL li ol 去查一下里面的李。

$(document).ready(function() {
  $('#myUL li ol').each(function() {
    var lenLi = $(this).find('li').length;
    console.log(lenLi);
    if (lenLi == 0) {
      $(this).remove();
    }
  })
})

$(document).ready(function() {
  $('#myUL li ol').each(function() {
    var lenLi = $(this).find('li').length;
    console.log(lenLi);
    if (lenLi == 0) {
      $(this).remove();
    }
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<ol id="myUL">
  <li>Hello 1</li>
  <li>Hello 2
    <ol></ol>
  </li>
  <li>Hello 3
    <ol>
      <li>Hello 3.1</li>
      <li>Hello 3.2</li>
      <li>Hello 3.3</li>
    </ol>
  </li>
</ol>

• 2 楼

Nidhin Joseph 6 年前

if ($('#el').is(':empty')){
  // custom code
}

更多信息 here

• 3 楼

Jack Bashford 6 年前

您的代码正在遍历所有 li 包含在 #myUL .使用一级子选择器 > 以下内容:

$(document).ready(function() {
  $('#myUL > li').each(function() {
    var lenLi = $(this).find('ol').children('li').length;
    if (lenLi == 0) {
      $(this).remove();
    }
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<ol id="myUL">
  <li>Hello 1</li>
  <li>Hello 2
    <ol></ol>
  </li>
  <li>Hello 3
    <ol>
      <li>Hello 3.1</li>
      <li>Hello 3.2</li>
      <li>Hello 3.3</li>
    </ol>
  </li>
</ol>

• 4 楼

Musa 6 年前

你的选择器 #myUL li 也在选择 li 因为他们是 锂 后代 #myUL 既然他们没有 ol 具有 锂 在它们里面它们被移除。您可以使用子选择器 > 只选择 #米乌尔 是的。

$(document).ready(function() {
  $('#myUL > li').each(function() {
    var lenLi = $(this).find('ol').children('li').length;
    if (lenLi == 0) {
      $(this).remove();
    }
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<ol id="myUL">
  <li>Hello 1</li>
  <li>Hello 2
    <ol></ol>
  </li>
  <li>Hello 3
    <ol>
      <li>Hello 3.1</li>
      <li>Hello 3.2</li>
      <li>Hello 3.3</li>
    </ol>
  </li>
</ol>

登录后回复