選擇使用JavaScript

特定的DOM元素我在我的HTML下面的代碼：選擇使用JavaScript

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

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

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

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

我想選擇其中包含數'3'爲文本的確切<li>。

是否有任何方法來選擇確切的元素？

我們可以通過使用一些OO-JS方法來選擇嗎？

來源

2015-04-18 Sundar

使用jQuery'$（「禮：含有（‘3’）」）'將返回它含有3- –

嘗試使用jQuery選擇:contains

說明：選擇包含指定文字的所有元素。

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

DEMO

精確匹配的文本

按@Raoulito提他的評論在這裏更新的答案匹配使用jQuery filter()確切的文本其中。

說明：將匹配元素的集合減少爲匹配選擇器或通過函數的測試的元素。

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

DEMO

來源

2015-04-18 11:41:04

裏的對象儘管這種方法可以有點unprecise爲它選擇的所有元素_containing_還將選擇「3」，意思是「0.3」和「13」。 – Raoulito

是的，你是對的。檢查我有更新我的答案，確切的文字匹配。感謝您發現這一點:) –

與jQuery contains嘗試

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

Demo

來源

2015-04-18 11:40:03 Sadikhasan

這僅選擇具有恰好 '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等

來源

2015-04-18 11:46:54 Raoulito

Oooh是的，對不起搶奪！：） – Raoulito

使用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.

來源

2015-04-18 11:50:26 ketan

如果你想只使用的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

來源

2015-04-18 11:52:22 kidA

選擇使用JavaScript

回答

相關問題