CODEWITHSUNDEEP
jqueryhtml
Abdul Rehman Sayed
Abdul Rehman Sayed

Reputation: 6672

jquery Case Insensitive find method by data

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");

Upvotes: 2

Views: 400

Answers (3)

sachin kumar
sachin kumar

Reputation: 159

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"]');

Upvotes: 0

George
George

Reputation: 36794

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).

Upvotes: 2

George
George

Reputation: 6739

This worked for me

var searchValue ="myval";

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

Upvotes: 0

Related Questions