Question

以下代码段，我尝试获取并突出显示每个包含空li元素（ol而没有任何ol元素）的li，无论级别。

$(document).ready(function() {
  var Text = '';
  var emptyLiText = '';
  $('ol#myUL > li').each(function() {
    lenOl = $(this).find('ol').length;

    if (lenOl > 0) {
      lenOlLi = $(this).find('ol').children('li').length;

      if (lenOlLi == 0) {

        $(this).addClass('error_item');
        emptyLiText = $(this).clone() //clone the element
          .children() //select all the children
          .remove() //remove all the children
          .end() //again go back to selected element
          .text();

        emptyLiText = $.trim(emptyLiText);
        Text += ' ' + emptyLiText;

        $('.message').html('<div class="alert alert-danger">' +
          '<button type="button" class="close" data-dismiss="alert">&times;</button><b>Unable to Save:</b> Menu item <b>' + Text + '</b> is parent item but does not has sub-item inside.</div>');

        breakout = true;
        // return false;

      } else {
        ($(this).hasClass('error_item') == true) ? $(this).removeClass('error_item'): '';
      }


    }
  })
})

.error_item {
  border: 1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.0/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.0/js/bootstrap.min.js" crossorigin="anonymous"></script>

<div class="message"></div>
<ol id="myUL">
  <li>Sample Item 1
    <ol>
      <li>Sample Item 2
        <ol></ol>
      </li>
      <li>Account</li>
    </ol>
  </li>
  <li>Sample Item 3
    <ol></ol>
  </li>
  <li>Sample Item 4</li>
  <li>Sample Item 5
    <ol>
      <li>Sample Item 6
        <ol>
          <li>Sample Item 7
            <ol></ol>
          </li>
        </ol>
      </li>
    </ol>
  </li>
</ol>

但是，目前我的尝试只能获得第一级li，其中的内部为空ol。当空ol位于列表的第二或第三级时，它将被忽略，例如。示例项目2和示例项目7。

我的问题是，ol内的li里面有多少子级别，该怎么办？因为我的项目与此有关。谢谢。

Answer 1

您使用的是$('ol#myUL > li')选择器，其中>表示直子。

用空格替换>以获得父<li>内所有<ol>元素的列表

像这样的东西 $('ol#myUL li')

Answer 2

...获取并突出显示每个包含空ol元素的li

普通香草JS

const emptyOl = [].prototype.filter.call(document.querySelectorAll('ol'), el => el.childNodes.length < 1)
const liOfEmptyOl = [].prototype.filter.call(emptyOl, el => el.parentNode.tagName == 'LI')
const highLighted = [].prototype.map.call(liOfEmptyOl, el => el.classList.add('highlighted'))

if (liOfEmptyOl.length > 0) console.error('Danger')

CSS

.highlighted {border: 1px solid red}

当li在Jquery列表项的子级别中时，如何在li内部获取空ol？

2 个答案: