Question

我想使用jquery的find方法基于数据属性进行不区分大小写的搜索。

这是HTML：

    <body>
    <div class="main">
     <div> 
        <p data-Col="MyVal"> hkjhkjh</p>
     </div>
     <div  data-Col="MyVAl"> some more text
     </div>        
    </div>
    <div class="main">
        <div  data-Col="myval"> some more text
         </div>        
        <div > 
            <p data-Col="myval"> some more nesting</p>
         </div>        
    </div>
</body>

＆安培;脚本：

var searchValue ="myval";

$(".main").find("[data-Col='" + searchValue + "']").css("background-color","red");

我可以将颜色设置为最后一个div（大小写匹配），但其他人没有被选中。

请帮忙.. 提前谢谢..

修改： 我也试过下面的脚本，但它不起作用..

$(".main").filter(function() {    
    return this.data("Col").toLowerCase() == searchValue.toLowerCase();
}).css("background-color","red");

Answer 1

您最近的尝试几乎就在那里，只有当您真的要过滤内部段落时，才会尝试过滤.main，首先找到它们，然后过滤它们。

当你应该首先在它上面创建一个jQuery对象时，也试图在DOM元素上调用.data()：

$(".main").find('[data-Col]').filter(function() {
    return $(this).attr('data-Col').toLowerCase() == searchValue.toLowerCase();
}).css("background-color","red");

JSFiddle

没有不区分大小写的属性选择器。（尚未）。

Answer 2

这对我有用

var searchValue ="myval";

$(".main [data-Col]").filter(function() {
    return $(this).attr("data-Col").toLowerCase() == searchValue.toLowerCase();
}).css("background-color","red");

Answer 3

您可以使用过滤器来实现此目的。

$('.main').find('[data-col]').filter(function() {
    return $(this).attr('data-col').toLowerCase().indexOf('myval') > -1;
});

如果确定值常量，则在选择器中使用OR运算符的另一种方法，例如

$('[data-col="myval"],[data-col="myVAl"], [data-col="MYVAL"]');

jquery Case不敏感的数据查找方法

3 个答案: