Show/Hide label based on value?

Question

In my project I have situation where I have to check value of my input and then show/hide elements. Here is my HTML code:

<td>
  <label class="test1">
    <input type="radio" name="reservation" class="bls" id="bls_1" value="10"/>
  </label>
  <label class="test2" style="display:none">
    <span>John, Cook</span>
  </label>
</td>

<td>
  <label class="test1">
    <input type="radio" name="reservation" class="bls" id="bls_2" value="0"/>
  </label>
  <label class="test2" style="display:none">
    <span></span>
  </label>
</td>

Here is my JQuery:

$('.bls').each(function() {
    if($(this).val() > 0){
        $(this).parent('.test1').hide();
        $('.test2').show();
    }
});

My current code hide radio button based on the values but I have a problem with show() effect. I want only element in the same td to show.

My current code display all label with class name test2. I want to display label only for td where my value is greater than 0. How that can be done in JQuery?

Answer 1

Try to chain the next() and show() from this object,

$('.bls').each(function() {
    if($(this).val() > 0){
       $(this).parent('.test1').hide().next('.test2').show();
    }
});