CODEWITHSUNDEEP
jqueryhtml
Greg Ostry
Greg Ostry

Reputation: 1231

How to manipulate a html list with jquery

I have unsorted list in html. Some li's have a class="checked". If the li element have the class='checked' it should hide me the span inside the li element.

My example:

$('ul li').each(function(){
    if($(this).attr('class') == 'checked'){
        $('li span').hide();
    }
});
<ul>
    <li class="checked" id="item-1"><span class='priorityValue'>1</span></li>
    <li class="checked" id="item-2"><span class='priorityValue'>2</span></li>
    <li id="item-3"><span class='priorityValue'>3</span></li>
    <li id="item-4"><span class='priorityValue'>4</span></li>
</ul>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

But my code is hidding every list element. Why is that so ?

Upvotes: 1

Views: 58

Answers (6)

Pranav C Balan
Pranav C Balan

Reputation: 115222

In your code $('li span') would select all elements instead select span within the current element.

$('span', this).hide();
// or
$(this).find('span').hide();


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
    <li class="checked" id="item-1"><span class='priorityValue'>1</span></li>
    <li class="checked" id="item-2"><span class='priorityValue'>2</span></li>
    <li id="item-3"><span class='priorityValue'>3</span></li>
    <li id="item-4"><span class='priorityValue'>4</span></li>
</ul>
<script>
    $('ul li').each(function(){
        if($(this).attr('class') == 'checked'){
            $('span',this).hide();
        }
    });
</script>

Also, it's better to use hasClass() method to check element has a certain class since the element may have multiple class.

$('ul li').each(function(){
    if($(this).hasClass('checked')){
        $('span', this).hide();
    }
});


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="checked" id="item-1"><span class='priorityValue'>1</span></li>
  <li class="checked" id="item-2"><span class='priorityValue'>2</span></li>
  <li id="item-3"><span class='priorityValue'>3</span></li>
  <li id="item-4"><span class='priorityValue'>4</span></li>
</ul>
<script>
  $('ul li').each(function() {
    if ($(this).hasClass('checked')) {
      $('span', this).hide();
    }
  });
</script>

There is no necessary for the each() method in your code, you can reduce into a single line by updating selector with the class.

$('ul li.checked span').hide();


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="checked" id="item-1"><span class='priorityValue'>1</span></li>
  <li class="checked" id="item-2"><span class='priorityValue'>2</span></li>
  <li id="item-3"><span class='priorityValue'>3</span></li>
  <li id="item-4"><span class='priorityValue'>4</span></li>
</ul>
<script>
  $('ul li.checked span').hide();
</script>

Upvotes: 0

Anu Sree
Anu Sree

Reputation: 59

$('li.checked span').hide();

You can use above code , each function is not needed for this function

Upvotes: 0

Jurij Jazdanov
Jurij Jazdanov

Reputation: 1258

you are hiding all spans with your selector. Find span in the current element you interact with

$('ul li').each(function(){
    if($(this).hasClass('checked')){
        $(this).find('span').hide();
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
    <li class="checked" id="item-1"><span class='priorityValue'>1</span></li>
    <li class="checked" id="item-2"><span class='priorityValue'>2</span></li>
    <li id="item-3"><span class='priorityValue'>3</span></li>
    <li id="item-4"><span class='priorityValue'>4</span></li>
</ul>

Edit: due to Mohammad comment I suggest to check it the element has a checked class, not check the whole class attribue

Upvotes: 0

4b0
4b0

Reputation: 22323

Use $(this)

 $('ul li').each(function(){
        if($(this).attr('class') == 'checked'){
          $(this).find('span').hide(); // If want to hide only span
          //$(this).hide(); // if want to hide li
        }
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
    <li class="checked" id="item-1"><span class='priorityValue'>1</span></li>
    <li class="checked" id="item-2"><span class='priorityValue'>2</span></li>
    <li id="item-3"><span class='priorityValue'>3</span></li>
    <li id="item-4"><span class='priorityValue'>4</span></li>
</ul>

Upvotes: 1

JustAndrei
JustAndrei

Reputation: 859

It would be more effective to do that this way:

$('ul li.checked span').hide();

Also, consider using plain CSS:

ul li.checked span {
    display: none;
}

Upvotes: 1

guradio
guradio

Reputation: 15555

$('ul li.checked span').hide()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="checked" id="item-1"><span class='priorityValue'>1</span></li>
  <li class="checked" id="item-2"><span class='priorityValue'>2</span></li>
  <li id="item-3"><span class='priorityValue'>3</span></li>
  <li id="item-4"><span class='priorityValue'>4</span></li>
</ul>

  1. No need for iteration just find the li with class checked then find span then hide

Upvotes: 0

Related Questions