jquery - 选择具有特定内容的元素答案

【问题标题】：jquery - select an element with specific contentjquery - 选择具有特定内容的元素
【发布时间】：2017-09-13 20:12:37
【问题描述】：

我有一个这样的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 代码中，我需要获取一个具有 content 类的 <span> 元素，该元素恰好具有 1 或 2 ，...，100

我测试了 jquery .contains 方法，但这会返回所有具有例如1 的元素。比如1、12、...。

【问题讨论】：

首先，没有类test的span元素。第二个... 是一个文本节点，没有包裹在任何元素下

标签： javascript jquery html function jquery-selectors

【解决方案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>

【讨论】：

用.text代替.html。
@Rajesh 这真的取决于。在这种情况下，就问题而言，两者在功能上是可以互换的。
@Alexandru-IonutMihai 谢谢你的完美回答。
@Terry 据我了解，我们为 SO 创建了一个示例，但我们的实际代码却大不相同。因此，我更喜欢使用.text

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

您可以使用普通的 .indexOf() 方法。

indexOf 方法采用您要查找的字符串的参数并返回索引（如果找到），如果没有返回 -1。

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

for loop...

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

【讨论】：

【解决方案4】：

您可以使用.filter()，获取并检查元素的.textContent 或.innerHTML，在.filter() 回调中您可以使用RegExp N$，其中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>

【讨论】：

【解决方案5】：

你可以做这样的事情..

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

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

});

a 现在将包含包含您的文本的跨度的 html。

【讨论】：