Question

This is driving me nuts… But I surely miss something.

So the HTML looks like:

<ul>
  <li><span>Product spec name</span><span>232112412</span></li>
  <li><span>Product spec name</span><span>cm</span></li>
  <li><span>Product spec name</span><span>80 cm</span></li>
  <li><span>Product spec name</span><span>75 cm</span></li>
  <li><span>Product spec name</span><span>cm</span></li>
</ul>

So what I want to achieve is to hide those list elements where the second span contains less than or equal to 2 characters.
I thought about putting them into a variable, loop through them, and if the length of the current item is less than or equal to 2 then jQuery should hide its parent.

Heres the code I wrote:

$(document).ready(function () {
     var pspec = $('ul li span:nth-child(2)');

     for(i=0;i<pspec.length;i++) {
        if($(pspec[i]).text().length <= 2) {
            $(this).parent().hide();
        }
     }
});

But this code won’t do the trick… I still consider myself a jQuery beginner so please would You be so kind to help me out on this one?

Thanks in advance!

Best Wishes,
Matt

Answer 1

Demo: http://jsfiddle.net/PFaav/

$(document).ready(function () {
  $('ul li').filter(function () {
    return $(this).find('span').eq(1).text().length <= 2;
  }).hide();
});

Your code will work if you replace

$(this).parent().hide();

by this

$(pspec[i]).parent().hide();