if list data contains

Question

I have got the following issue

<a href="" class="so" title="Schuko"></a>

<a href="" class="so" title="French CEE17"></a>

    $('a.so').live("click", function () {   
        var filter = $(this).attr("title");
                if (filter) {       
                    $('li:contains('+$(this).attr("title")+')').each(function(){
    alert('yes');
});      
                }       
            return false;
    });

<ul class="product_content">
<li class="prod" data-sockets="UK 15A CEE22 Schuko French Swiss Danish ">text goes here</li>
<li class="prod" data-sockets="UK 15A Schuko French CEE17 (16A) Socapex Harting Dutch Harting ">text goes here</li>
</ul>

I am trying to loop through everything that contain data-sockets value to show and hide the other li elements.

I assume that's a summation of your code as the syntax is obviously very wrong. Some more details of your problem would really help here. — Rory McCrossan, Nov 21 '11 at 12:57

vertazzar · Accepted Answer · 2011-11-21T13:09:47.980

 $('a.so').live("click", function () {   
        var filter = $(this).attr("title");
                if (filter) {   
                    // loop only trough li-s that have data-sockets attr
                    $('li[data-sockets]').each(function(){

                   if ($(this).find(':contains('+filter+')'))
                   {
                         alert('yes');
                   }
                 });      
                }       
            return false;
    });

second version:

$('a.so').live("click", function () {   
        var filter = $(this).attr("title");
                if (filter) {   
                    // loop only trough li-s that have data-sockets attr
                    $('li[data-sockets]:contains('+filter+')').each(function(){


                         $(this).fadeOut();

                 });      
                }       
            return false;
    });

hi first thanks for the reply but it seems to fadeout both http://jsfiddle.net/isimpledesign/C6T5P/6/ not just the one that contain the value. — DCHP, Nov 21 '11 at 13:03

Manuel van Rijn · Answer 2 · 2011-11-21T13:09:39.357

1

or you could select it as following:

    $('a.so').live("click", function () {   
        var filter = $(this).attr("title");

        $('li[data-sockets*="'+filter+'"]').each(function() {
            alert( 'yes' );
        });
        return false;
    });

this uses the jquery attribute contains selector

jsfiddle here

edited Nov 21 '11 at 13:09

answered Nov 21 '11 at 13:02

Manuel van Rijn

10,170
1
29
52

score 0 · Answer 3 · answered Nov 21 '11 at 12:54

0

$("li").data("sockets") should get it.

answered Nov 21 '11 at 12:54

v42

1,415
14
23

score 0 · Answer 4 · answered Nov 21 '11 at 13:25

Try This....

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $('a.so').live("click", function () {   
            var filter = $(this).attr("title");
            if (filter) {

                // hide all the list elements
                $('li').each(function(){
                    $(this).hide();
                });                    

                // show the elements that contains only filter string
                $('li:contains('+filter+')').each(function(){
                    $(this).show();
                });      
            }       
            return false;
        });
    });
</script>
</head>

<body>

<a href="" class="so" title="Schuko">Schuko</a>

<a href="" class="so" title="French CEE17">French CEE17</a>



<ul class="product_content">
<li class="prod" data-sockets="UK 15A CEE22 Schuko French Swiss Danish ">UK 15A CEE22 Schuko French Swiss Danis</li>
<li class="prod" data-sockets="UK 15A Schuko French CEE17 (16A) Socapex Harting Dutch Harting ">"UK 15A Schuko French CEE17 (16A) Socapex Harting Dutch Harting </li>
</ul>



</body>
</html>

if list data contains

4 Answers4