2017-04-18 77 views
3

的元素我有一个HTML的结构是这样的:的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类恰好具有12。 ..,100

我测试的jquery .contains方法,但这返回具有例如1所有元素。如1,12,...

+0

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

回答

4

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

+1

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

+1

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

+0

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

-1

你可以做这样的事情..

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

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

}); 

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

0

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

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

0

您可以使用香草.indexOf()方法。

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

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

for loop... 

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

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