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

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()); 
     } 
    }); 
});