的jQuery - 選擇具有特定內容

Question

的元素我有一個HTML的結構是這樣的：

<div class="test"> 
    <span class="content">1</span> 
</div> 
<div class="test"> 
    <span class="content">2</span> 
</div> 
... 
<div class="test"> 
    <span class="content">100</span> 
</div> 

在我的javascript代碼，我需要得到<span>元素與content類恰好具有1或2。 ..，100

我測試的jquery .contains方法，但這返回具有例如1所有元素。如1,12，...。

Answer 1

您可以使用filter方法接受應用於每個項目的回調函數。

var array=$('.test').find('.content').filter(function(){ 
 
    return $(this).text().trim()==100; 
 
}); 
 
console.log(Array.from(array));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="test"> 
 
    <span class="content">1</span> 
 
</div> 
 
<div class="test"> 
 
    <span class="content">2</span> 
 
</div> 
 
<div class="test"> 
 
    <span class="content">100</span> 
 
</div>

Answer 2

你可以做這樣的事情..

$('.test').each(function() { 

if($(this).text == '1') 
{ 
var a = $(this).html(); 
} 

}); 

一個現在將包含其中包含文本跨度的HTML。

Answer 3

您可以通過以下方式進行：

$('.content').each(function(){ 
 
    if($(this).html() == "2") 
 
    { 
 
    console.log("THE SPAN WITH 2 IS "); 
 
    console.log($(this)[0]); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="test"> 
 
    <span class="content">1</span> 
 
</div> 
 
<div class="test"> 
 
    <span class="content">2</span> 
 
</div> 
 
<div class="test"> 
 
    <span class="content">100</span> 
 
</div>

我們在這裏做的是通過內容類跨度的檢查，並檢查其內部HTML是2，如果是我們console.log它。

Answer 4

您可以使用香草.indexOf（）方法。

indexOf方法使用要查找的字符串的參數，並返回索引（如果找到），或者返回索引（如果找不到），或者返回索引（如果找不到）。

var myEl = document.querySelector(".test"): 

for loop... 

if(myEl.innerHTML.indexOf(2) != -1){ 
    console.log("This element contains the number 2") 
} 

Answer 5

您可以使用.filter()，獲取和檢查.textContent或元素的.innerHTML，在.filter()回調可以使用RegExpN$其中N是數量相匹配。例如，要匹配"1"或"2"設置爲.textContent的元素，您可以使用RegExp/1$|2$/;以匹配"100"，/100$/;與RegExp.prototype.test()

var filtered = $("span.content").filter((_, {textContent}) => 
 
       /1$|2$/.test(textContent)); 
 

 
filtered.css("color", "green");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> 
 
</script> 
 
<div class="test"> 
 
    <span class="content">1</span> 
 
</div> 
 
<div class="test"> 
 
    <span class="content">2</span> 
 
</div> 
 
... 
 
<div class="test"> 
 
    <span class="content">100</span> 
 
</div>