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> 元素 class content 正好有 1 或2 , ..., 100

我测试了 jquery .contains 方法， 但是这个 returns 具有例如 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();
}

});

a 现在将包含包含您的文本的那个范围的 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>

我们在这里做的是检查跨度的内容 class 并检查它们的内部 html 是否为 2，如果是我们 console.log 它。

Answer 4

您可以使用原版 .indexOf() 方法。

indexOf 方法采用您要查找的字符串作为参数，returns 索引（如果找到）或 -1（如果未找到）。

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()回调中您可以使用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>

jquery - select 具有特定内容的元素

jquery - select an element with specific content

html

javascript

function

jquery-selectors