Javascript - Distinguish between similar list items

Question

Each list item is appended by this for loop. Imagine a list with three elements, for example. Two buttons in a row comprise each list element. The goal is to first hide all of the .second buttons by default. When a specific .first button is clicked, that specific .first button is hidden and that specific .second button is shown. By specific, I mean belonging to the same list element.

for (i=0; i<userLog.length; i++) {
      $('#modalChoices').append("<li id='modalItem'><input class='modalInput btn btn-primary first' type='button'> <input class='modalInput btn btn-success second' type='button'></li>");
    }

  // Hide all seconds by default.
  $('.second').hide();

  $('.first').on('click', function() {
    $('.first').hide();
    $('.second').show();
  });

We can hide all of the seconds and all of the firsts very easily. How do we distinguish between list items? Is there some 'this' selector that will accomplish this?

Answer 1

use $(this) selector to hide first button and use $(this).siblings('.second') selector to show second button for that specific li .

$('.first').on('click', function() {
    $(this).hide();
    $(this).siblings('.second').show();
});

Please check below snippet for better undertanding.

 for (i=0; i<20; i++) { $('#modalChoices').append("<li id='modalItem'><input class='modalInput btn btn-primary first' value='first' type='button'> <input class='modalInput btn btn-success second' type='button' value='second'></li>"); } // Hide all seconds by default. $('.second').hide(); $('.first').on('click', function() { $(this).hide(); $(this).siblings('.second').show(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="modalChoices"></div> 

Answer 2

One-liner to fix this problem. $(this) refers to the input.first being clicked and next() is its adjacent input.second . It should be faster to use next than to use siblings .

$('.first').click(function() {
    $(this).hide().next('.second').show();
});

  for (i=0; i<5; i++) { $('#modalChoices').append("<li id='modalItem'><input class='modalInput btn btn-primary first' value='first' type='button'> <input class='modalInput btn btn-success second' type='button' value='second'></li>"); } // Hide all seconds by default. $('.second').hide(); $('.first').click(function() { $(this).hide().next('.second').show(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="modalChoices"></div> 

Answer 3

jQuery event callbacks always have the context of the target element. So you can get a pointer to them using this . Then use the .siblings function to get any adjacent items, in this case .second .

Note: it's always a good idea to not resolve selectors repeatedly, and to use a context in your selectors, like I've done here with the modalChoices var.

    var modalChoices = $('#modalChoices');

    for (i = 0; i < userLog.length; i++) {
          modalChoices.append("<li id='modalItem'><input class='modalInput btn btn-primary first' type='button'> <input class='modalInput btn btn-success second' type='button'></li>");
    }

    // Hide all seconds by default. 
    $('.second', modalChoices).hide();

    $('.first', modalChoices).on('click', function() {
        $(this).hide().siblings(".second").show();
    });