找到其子元素为空字符串的li

Question

示例HTML

<li class= "View">
<a><span>Red</span></a>
</li>
<li class= "View">
<a><span>Orange</span></a>
</li>

<li class= "View">
<a><span>Green</span></a>
</li>
<li class= "View NotView">
<a><span>Green not view</span></a>
</li>
<li class= "View">
<a><span></span></a>
</li>
<li class= "View">
<a><span>Brown</span></a>
</li>

我想选择所有具有View类并且没有类NotView的li标签 li标签下的span标签不能为空，所以我需要输出

Red
Orange
Green
Brown

Answer 1

所以它是一个类选择器和一个检查空的选择器。

var lis = $("li").not("li.NotView, li:has(span:empty)");
console.log(lis);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
  <li class="View">
    <a><span>Red</span></a>
  </li>
  <li class="View">
    <a><span>Orange</span></a>
  </li>

  <li class="View">
    <a><span>Green</span></a>
  </li>
  <li class="View NotView">
    <a><span>Green not view</span></a>
  </li>
  <li class="View">
    <a><span></span></a>
  </li>
  <li class="View">
    <a><span>Brown</span></a>
  </li>
</ul>

Answer 2

您可以使用:not()伪类选择器来避免使用某个类的元素，然后使用filter()方法过滤掉空元素。

console.log(
  $('li.View:not(.NotView)').filter(function() {
    return $(this).text().trim().length
  }).map(function() {
    return $(this).text().trim();
  }).get()
)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="View">
    <a><span>Red</span></a>
  </li>
  <li class="View">
    <a><span>Orange</span></a>
  </li>

  <li class="View">
    <a><span>Green</span></a>
  </li>
  <li class="View NotView">
    <a><span>Green not view</span></a>
  </li>
  <li class="View">
    <a><span></span></a>
  </li>
  <li class="View">
    <a><span>Brown</span></a>
  </li>
</ul>

使用:has()伪类选择器而不是filter()方法。

console.log(
  $('li.View:not(.NotView):not(:has(:empty))').map(function() {
    return $(this).text().trim();
  }).get()
)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="View">
    <a><span>Red</span></a>
  </li>
  <li class="View">
    <a><span>Orange</span></a>
  </li>

  <li class="View">
    <a><span>Green</span></a>
  </li>
  <li class="View NotView">
    <a><span>Green not view</span></a>
  </li>
  <li class="View">
    <a><span></span></a>
  </li>
  <li class="View">
    <a><span>Brown</span></a>
  </li>
</ul>

Answer 3

你可以像这样使用选择器

lazy

然后您可以使用$('li.View').not('.NotView').has('a span:not(:empty)') 来获取数组中的文本或类似内容。

map()

var arr = $('li.View').not('.NotView').has('a span:not(:empty)').map(function() {
  return $(this).find('a span').text();
}).get();

console.log(arr)

Answer 4

$(document).ready(function(){
    $("li.View").not('.NotView').each(function () {
        if ($(this).find('span').html().trim() !== '') {
            console.log($(this).find('span').html());
        }
    });
});