Loop through list using Jquery

Question

Total js newb here.

Here is the HTML

<a href="#" class="dur" id="8.5">Size 8.5</a>
 <div class="product1">
 <ul class="sizeAvail" style="display:none;">   
  <li>8</li>    
  <li>8.5</li>  
  <li>9</li>    
  <li>9.5</li>  
  <li>10</li>
 </ul>
 </div>
 <div class="product2">
 <ul class="sizeAvail" style="display:none;">   
  <li>8</li>    
  <li>8.5</li>  
  <li>9</li>    
  <li>9.5</li>  
 </ul>
 </div>

Here's the 'logic' of what I need...

When the user clicks the Link

Capture the id of that element

Set that as a variable

Loop through li for all ul that have class 'sizeAvail'

If li element matches variable

stop looping and move onto next ul

If ul does not have li that matches variable

set class of container div to 'hide'

This is where I'm at so far...any help would be greatly appreciated.

<script type = "text/javascript" > $(document).ready(
 $(".dur").click(function () {
 var clickedSize = $(this).attr("id");
 $(".sizeAvail").each(function (li,+) {
    alert($(this).text());
 });
}); 
</script>

Answer 1

Here is a working fiddle:

http://jsfiddle.net/Hive7/uZTYf/

Here is the jquery I used:

$(".dur").click(function () {
    var clickedSize = this.id;
    $(".sizeAvail li").each(function () {
        if($(this).text() == clickedSize) {
            $(this).parent().show();
        } else {
            $(this).hide();
        }
    });
});

What you are currently doing is not right as you aren't looping through the children of .sizeAvail because you didn't directly state though what you did state wasn't in quotes like most aspects of jquery need to be.

If this still does not work make sure you have a jquery library

Or you can use the pure js option:

var $items = document.getElementsByClassName('sizeAvail');
var $dur = document.getElementsByClassName('dur');
for (i = 0; i < $dur.length; i++) {
    $dur[i].addEventListener('click', durClick);
}

function durClick() {
    var clickedSize = this.id;
    for (i = 0; i < $items.length; i++) {
        var $liElems = $items[i].getElementsByTagName('li');
        for (i = 0; i < $liElems.length; i++) {
            if ($liElems[i].innerHTML == clickedSize) {
                $liElems[i].parentNode.style.display = 'block';
                $liElems[i].style.display = 'block';
            } else {
                $liElems[i].style.display = 'none';
            }
        }
    }
}

http://jsfiddle.net/Hive7/uZTYf/2/

Answer 2

everything you are trying to do is pretty simple syntax-wise. you can find documentation on methods to use in a number of places. you could simply use javascript for this but i am assuming you want to use jQuery

on a high level you'll want to use the jQuery selector to get all UL objects and then for each UL loop over all LI children, eg:

$('ul').each(function() {
    $(this).find('li').each(function(){

    });
});

to get the data you are looking for, you can use jQuery methods like addClass(), attr(), etc.

Answer 3

You can use a combination of not , has and contains selectors to get the matched elements and set a class on them using addClass .

Ref:

http://api.jquery.com/not-selector/

http://api.jquery.com/has-selector/

http://api.jquery.com/contains-selector/

http://api.jquery.com/addClass/

Code:

$(".dur").click(function () {
    $(".sizeAvail:not(:has(li:contains('"+$(this).prop("id")+"')))").addClass('hide')
});

Demo: http://jsfiddle.net/IrvinDominin/t8eMD/

Answer 4

You may use this. Set a flag when checking all li's of a div. If none li has same value as the id, at the end hide the div.

  $(document).ready(function(){
    $(".dur").click(function () {
      var clickedSize = this.id;
      $(".sizeAvail").each(function(){
          var hide = 1;
          $(this).children('li').each(function(){
            if(clickedSize == $(this).text()) hide=0;
          });
          if(hide){
              $(this).closest('div').hide(); //Or $(this).parent().hide();
          }
      });
    }); 
  });

JSFIDDLE

Answer 5

You may try this too

$('a.dur').on('click', function(e){
    e.preventDefault();
    var id = this.id;
    $('ul.sizeAvail li').each(function(){
        if($(this).text() == id) $(this).closest('ul').addClass('hide');
    });
});

EXAMPLE.

Answer 6

Demo: http://jsfiddle.net/QyKsb/

This is one way to do it, as you were doing. However, i don't, personally like cluttering html with data as that. But it maybe good choice in some situations but i dont like it.

also you cant give id a value that starts with numbers.

var products= $("div[class^='product']"),
    dur =$('.dur');

dur.click(change);
function change(){
   var size= $(this).data('size');
    products.each(function(){
        var d = $(this);
        d.find('.sizeAvail>li').each(function(){
            d.hide(); 
            if($(this).text()==size) { d.show(); return false;}
        });
    });
}