查找李其子女一个元素都有空字符串

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 和跨度在李标签标签不能为空，所以我需要输出是

Red 
Orange 
Green 
Brown 

Answer 1

可以使用: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 2

所以它是一个类选择和有选择，检查空。

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 3

你可以这样

$('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)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<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>asdf<span></span></a> 
 
</li> 
 
<li class="View"> 
 
    <a><span>Brown</span></a> 
 
</li>

Answer 4

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