快捷導(dǎo)航

jQuery contains過(guò)濾器實(shí)現(xiàn)精確匹配使用方法

更新時(shí)間：2013年04月12日 15:44:07 作者：

contains 選擇器選取包含指定字符串的元素。該字符串可以是直接包含在元素中的文本，或者被包含于子元素中。經(jīng)常與其他元素/選擇器一起使用，來(lái)選擇指定的組中包含指定文本的元素

 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title></title> 
<!--<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script>--> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(function () { 
//根據(jù)select中的option的文本來(lái)執(zhí)行選中 
//$("#selectbox option[text='第二項(xiàng)']"); 
//$("#selectbox option").filter("[text='第二項(xiàng)']"); 
//上面兩種寫(xiě)法都是錯(cuò)誤的 
//正確寫(xiě)法 
$("#btn4").click(function () { 
var $option =$("#selectbox option:contains('第二項(xiàng)')").map(function(){ 
if ($(this).text() == "第二項(xiàng)") { 
return this; 
} 
}); 
alert($option.length > 0 ? "有對(duì)象" : "無(wú)對(duì)象"); 
$option.attr("selected", true); 
}); 
}); 
</script> 
</head> 
<body> 
<form id="form1"> 
<div> 
<select id="selectbox"> 
<option value="1">第一項(xiàng)</option> 
<option value="2">第二項(xiàng)</option> 
<option value="21">第二項(xiàng)1</option> 
</select> 
<input type="button" id="btn4" value="contains測(cè)試" /> 
</div> 
</form> 
</body> 
</html> 

$(".selector:contains('xx')")
　　contains()只作匹配查找，不夠精確，包含xx的selector和包含xxabc的selector都會(huì)查到。

解決辦法：
?$(".selector:contains('xx')[innerHTML='xx']")
　　這樣將查找內(nèi)容只有xx的selector。

您可能感興趣的文章:

相關(guān)文章

jQuery中select與datalist制作下拉菜單時(shí)的區(qū)別淺析
一般我們通常使用select制作下拉菜單，但是H5之后，datalist也可以充當(dāng)select的角色，而且兩者還有一點(diǎn)小的不同。具體區(qū)別詳解小編通過(guò)本文給簡(jiǎn)單介紹下
2016-12-12
jquery操作select option 的代碼小結(jié)
jquery操作select option 的代碼小結(jié),需要的朋友可以參考下。
2011-06-06
jquery綁定事件不生效的解決方法
jquery綁定click事件，怎么都不生效，這個(gè)問(wèn)題很多朋友都有遇到過(guò)，下面為大家解決一下,需要的朋友可以參考下
2014-02-02
在一個(gè)頁(yè)面實(shí)現(xiàn)兩個(gè)zTree聯(lián)動(dòng)的方法
最近發(fā)現(xiàn)項(xiàng)目中很多地方都是樹(shù)形菜單，而這些樹(shù)形菜單都是使用樹(shù)形插件zTree來(lái)制作的，下面這篇文章主要給大家介紹了關(guān)于在一個(gè)頁(yè)面實(shí)現(xiàn)兩個(gè)zTree聯(lián)動(dòng)的相關(guān)資料，需要的朋友可以參考借鑒，下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。
2017-12-12
jQuery實(shí)現(xiàn)Select下拉列表進(jìn)行狀態(tài)選擇功能
本文主要介紹了jQuery實(shí)現(xiàn)Select下拉列表進(jìn)行狀態(tài)選擇功能的代碼。具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧
2017-03-03
jquery validate添加自定義驗(yàn)證規(guī)則(驗(yàn)證郵箱郵政編碼)
這篇文章主要介紹了query validate添加自定義驗(yàn)證規(guī)則,可以驗(yàn)證郵箱、郵政編碼等，看代碼參考使用
2013-12-12
jQuery三組基本動(dòng)畫(huà)與自定義動(dòng)畫(huà)操作實(shí)例總結(jié)
這篇文章主要介紹了jQuery三組基本動(dòng)畫(huà)與自定義動(dòng)畫(huà)操作,結(jié)合實(shí)例形式總結(jié)了jQuery基本動(dòng)畫(huà)函數(shù)與自定義動(dòng)畫(huà)相關(guān)操作技巧及使用注意事項(xiàng),需要的朋友可以參考下
2020-05-05
jQuery實(shí)現(xiàn)鏈接的title快速出現(xiàn)的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)鏈接的title快速出現(xiàn)的方法,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2017-02-02
jquery之超簡(jiǎn)單的div顯示和隱藏特效demo(分享)
本篇文章是對(duì)jquery中的div顯示和隱藏特效demo進(jìn)行了詳細(xì)的分析介紹，需要的朋友可以參考下
2013-07-07
jquery 框架使用教程 AJAX篇
正好項(xiàng)目中準(zhǔn)備使用thickbox，于是干脆拋棄prototype.js，看起jquery.js了。JQuery確實(shí)不錯(cuò)，體積比Prototype小了許多，而且使用起來(lái)更方便更靈活。有人說(shuō)Prototype像JAVA，正統(tǒng)；而JQuery像Ruby，靈活，更趨于OOP。
2009-10-10