如何查找可見的跨度html文本包含jQuery中的某些文本

Question

只是漫遊，將有可能找到所有visible span html text包含jQuery中的某些文本？

我有以下代碼：

<div id="test"> 
    <span style="display:none;">one</span> 
    <span style="display:inline;">two</span> 
    <span style="display:inline;">three</span> 
    <span style="display:none;">four</span> 
    <span style="display:inline;">five</span> 
</div> 

無論如何，我可以用jQuery找出是否有任何visible span contain text「兩化」？

Answer 1

您可以使用(:visible)

var visiblespans = $('span:visible'); 

visiblespans.each(function(){ 
    if($.trim(this.text()) == 'two') { 
     console.log(this.text()); 
    } 
}); 

https://api.jquery.com/visible-selector/

Answer 2

你可以使用#test > span:visible選擇來獲取可見span元素，然後$(this).text()以獲取內部HTML自己內心的文字或$(this).html()。

$("#test > span:visible").each(function() { 
 
    console.log("Text:" + $(this).text()); 
 
    console.log("HTML:" + $(this).html()); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="test"> 
 
    <span style="display:none;">one</span> 
 
    <span style="display:inline;">two</span> 
 
    <span style="display:inline;">three</span> 
 
    <span style="display:none;">four</span> 
 
    <span style="display:inline;">five</span> 
 
</div>

Answer 3

1. 使用:visible選擇

   說明：選擇是可見的所有元素。

2. 使用:contains選擇

   說明：選擇包含指定文字的所有元素。

var arr = $('#test').find('span:visible:contains(two)').map(function(){ 
 

 
return $(this).text() 
 
}).get() 
 

 
console.log(arr)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="test"> 
 
<span style="display:none;">one</span> 
 
<span style="display:inline;">two</span> 
 
<span style="display:inline;">three</span> 
 
<span style="display:none;">four</span> 
 
<span style="display:inline;">five</span> 
 
</div>

Answer 4

在這裏，你去了一個解決方案https://jsfiddle.net/zk0Lvkmt/

$('#test').find('span').each(function(){ 
 
    if($(this).is(':visible')){ 
 
    console.log($(this).text()); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="test"> 
 
    <span style="display:none;">one</span> 
 
    <span style="display:inline;">two</span> 
 
    <span style="display:inline;">three</span> 
 
    <span style="display:none;">four</span> 
 
    <span style="display:inline;">five</span> 
 
</div>

Ø NLY visible span text將使用jQuery each方法&檢查跨度是否可見不使用$(this).is(':visible');

希望這將幫助你console.log

遍歷所有的跨度。

Answer 5

你可以用下面的代碼來訪問所有可見跨度

$(function(){ 
    $.each($('span:visible'),function(ind,val){ 
    console.log(val); 
    $(".visibleText").append(val); 
    }); 
}); 

Answer 6

你可以使用jQuery的濾波方法僅篩選需要的元素。 所以， 你可以做，

$('#test > span').filter(function(){ 
return ($(this).text() === 'two') && ($(this).is(':visible')) 
}) 

這將返回所有具有文本的元素「二」和可見