選擇使用JavaScript

Question

特定的DOM元素我在我的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

精確匹配的文本

按@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

這僅選擇具有恰好 '3' 作爲文本元素：

$('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