javascript - Loop through list using Jquery - Stack Overflow

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>

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>

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Oct 8, 2013 at 17:52 Ram 145k1616 gold badges172172 silver badges200200 bronze badges asked Oct 8, 2013 at 17:35 user2859646user2859646 8322 silver badges66 bronze badges 8

• Is anything happening if so what – Hive7 Commented Oct 8, 2013 at 17:39
• You should pass a function to .ready() method. And + is not a valid identifier. – Ram Commented Oct 8, 2013 at 17:43
• You should not put "." on id value. Try to use data-id="8.5" or data-size="8.5" and access it with jquery .data('id') or .data('size'). – Lucas Maus Commented Oct 8, 2013 at 17:43
• A jsfiddle for you: jsfiddle/bhlaird/eWTRZ (not solving anything, just helping you illustrate your current problem). – Barbara Laird Commented Oct 8, 2013 at 17:45
• 1 @LucasMaus: HTML5 accepts anything but a space ;-) – Brad Christie Commented Oct 8, 2013 at 17:52

 |  Show 3 more ments

6 Answers 6

Sorted by: Reset to default 1

Here is a working fiddle:

http://jsfiddle/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/Hive7/uZTYf/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, e.g.:

$('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.

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

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.

Demo: http://jsfiddle/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;}
        });
    });
}

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

Ref:

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

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

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

http://api.jquery./addClass/

Code:

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

Demo: http://jsfiddle/IrvinDominin/t8eMD/