Question

我的HTML中有以下代码：

<li class="strange">1</li>

<li class="strange">2</li>

<li class="strange">3</li>

<li class="strange">4</li>

我想选择包含数字<li>的确切'3'作为文字。

有没有方法可以选择确切的元素？

我们可以选择使用一些OO-JS方法吗？

Answer 1

尝试使用jQuery选择器:contains

描述：选择包含指定文本的所有元素。

$('li:contains("3")')

DEMO

匹配确切文字

根据@Raoulito在他的评论中提到这里使用jQuery filter()更新了与确切文本匹配的答案。

描述：将匹配元素集合减少到匹配元素选择器或传递函数的测试。

$(document).ready(function(){
   $("li").filter(function() {
   return $(this).text() === "3";
  }).css("color", "red");
});

DEMO

Answer 2

尝试使用jQuery contains

$('li:contains("3")');

<强> Demo

Answer 3

这只选择具有＆＃39; 3＆＃39;的元素。作为文字：

$('li.strange').each(function() {
    if ( $(this).text() == '3' ) {
        $(this).css('color','red');
    }
});

http://jsfiddle.net/dremztou/1/

$('li.strange:contains("3")').addClass('selected');将选择包含3的所有元素，包括13,23,33等

Answer 4

使用JavaScript，您可以这样做：

 var list = document.getElementsByClassName("strange");

 for (i = 0; i < list.length; i++) {
if(list[i].innerHTML ==3)
  {
    list[i].style.color = "blue";
     list[i].style.backgroundColor = "red";
   }
 }

检查Fiddle.

Answer 5

如果您只想使用javascript，可以执行以下操作：

<强> HTML

<ul id="ul">
    <li class="strange">1</li>
    <li class="strange">2</li>
    <li class="strange">3</li>
    <li class="strange">4</li>
</ul>

<强>的Javascript

var nums = document.getElementById("ul"); // get the ul element
var listItem = nums.getElementsByClassName("strange"); //fetch all elements inside the ul that have a class of strange

var element;

// loop through the list elements
for (var i=0; i < listItem.length; i++) {
    // check whether list's inner html is equal to 3
    if (parseInt( listItem[i].innerHTML) == 3) {
        // set the value of element equal to the list element
        element = listItem[i];
        break;
    }
}

console.log(element); // logs out the element that has the required value, you can use element.innerHTML to check

使用JavaScript选择特定的DOM元素

5 个答案: