jquery的contains如何实现精准匹配

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/LJFPHP/article/details/89154731

一、背景

      博主这边的背景是，在一个JS的循环中，要通过匹配option的值来给select下拉框加上默认选中效果。这种涉及到属性匹配的，最适合的就是jquery的contains选择器了。当然，大家也可以用这个选择器来匹配html元素的其他属性，都是可以的。

关于contains:参考文档：
http://www.w3school.com.cn/jquery/selector_contains.asp

二、不精准匹配

 var option = $(formId).find("option:contains('" + sourceText + "')").prop("selected", true); 

      这里的sourceText是我自己定义的变量值。这句的意思是，对于select下拉框，如果option的值和sourceText的值一样的话，就给它加一个selected效果。

问题：这个选择器确实是能匹配到对应的元素，但是它是不精准的匹配。

比如：
sourceText = 'test';
sourceText = 'test1';
这种情况的话，test和test1都能匹配到。

三、精准匹配

网上百度一下，有很多精准匹配的方案，大致都试一下

（1） 有一种说法是加上innerHTML，亲测无效

//  var option = $(formId).find("option:contains('" + sourceText + "')[innerHTML='" + sourceText + "']").prop("selected", true);  
 //网上方案，发现没用

（2） 有一种说法是加上个冒号：

 var option = $(formId).find("option:contains(':" + sourceText + "')").prop("selected", true);   
 //网上的方案，加个：,发现没用

（3）正确方法：

 var option = $(formId).find("option:contains('" + sourceText + "')").map(function(){
       			 if ($(this).text() == sourceText) { $(this).prop("selected", true) }
   		 });

      这个方法是可以的，就是通过map在一个函数中比对属性和变量的值。如果相等则赋予选中效果。这种通过 == 来比较的方案还是比较靠谱的。博主最终也是选用了这个方案，记录一下。

end