jquery Case Insensitive find method by data

Question

Fiddle : http://jsfiddle.net/y790z6zq/

I want to make a case insensitive search based on data attributes using find method of jquery.

Here is the 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>

& the script:

var searchValue ="myval";

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

I could set color to the last div (where case matches) but others are not getting selected.

Please Help.. Thanks in advance..

Edit : I also tried below script but it did not work..

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

http://stackoverflow.com/questions/5755722/case-insensitive-attribute-value-selector-with-jquery — AmmarCSE, Jun 02 '15 at 10:23
you can use `$(".main").find("[data-Col='" + searchValue + "']").last().css("background-color","red");` — The Reason, Jun 02 '15 at 10:26

George · Accepted Answer · 2015-06-02T10:51:51.017

Your most recent attempt is nearly there, only you are attempting to filter .main when you really want to filter the paragraphs inside, first find them, then filter them.

Also are trying to call .data() on a DOM element, when you should be first creating a jQuery object out of it:

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

JSFiddle

There is no case insensitive attribute selector. (yet).

score 0 · Answer 2 · answered Jun 02 '15 at 10:51

0

This worked for me

var searchValue ="myval";

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

answered Jun 02 '15 at 10:51

George

6,630
2
29
36

score 0 · Answer 3 · answered Jun 02 '15 at 10:56

You can use filter for achieve this.

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

Another way to use OR operator in selectors if you sure about the value constant e.g.

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

jquery Case Insensitive find method by data

3 Answers3