的jQuery - 选择具有特定内容

问题描述：

<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，...。

首先，有带班'test'没有span元素。第二个'...'是文本节点，不包含任何元素 – Rajesh

答

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

而不是'.html'使用'.text'。 – Rajesh

@Rajesh这真的取决于。在这个问题上，两者在功能上是可以互换的。 – Terry

@ Alexandru-IonutMihai谢谢你的完美答案。 – hamed

答

你可以做这样的事情..

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

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

});

一个现在将包含其中包含文本跨度的HTML。

答

您可以通过以下方式进行：

$('.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它。

答

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

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

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

for loop... 

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

答

您可以使用.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>

的jQuery - 选择具有特定内容

相关推荐