使用 JavaScript 选择特定的 DOM 元素

Question

我的 HTML 中有以下代码：

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

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

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

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

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

有什么方法可以选择准确的元素吗？

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

Answer 1

试试 jQuery contains

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

Demo

Answer 2

尝试使用 jQuery 选择器 :contains

Description: Select all elements that contain the specified text.

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

DEMO

匹配准确的文本

根据@Raoulito 在此处的评论中提到的更新答案，该答案与使用 jQuery filter() 的确切文本匹配。

Description: Reduce the set of matched elements to those that match the selector or pass the function's test.

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

DEMO

Answer 3

这只是 select 恰好有 '3' 作为文本的元素:

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

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

$('li.strange:contains("3")').addClass('selected');会select所有包含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 元素

Selecting a particular DOM element using JavaScript

html

javascript

jquery

javascript-events