CODEWITHSUNDEEP
javascriptjqueryhtml-lists
Mark
Mark

Reputation: 187

How to select each <li> with each button click sequentially using Jquery or Javascript

<ul>
  <li>New York</li>
  <li>Los Angeles</li>
  <li>Chicago</li>
</ul>

I start out by setting the click function to select the list items. The only problem is that it selects each one. I could use the eq() method, but that would not allow me to select each next list item every time the button is clicked. I tried the next() method and that does select the next item, but my question is, "How can I select the first list item when the button is clicked, then the next list item after the next click and so on.

$('button').click(function(){
  $('ul li').css("color", "red");
});

Upvotes: 1

Views: 3088

Answers (4)

fixatd
fixatd

Reputation: 1404

Right at the top of my head you could add a classwhich you can reference when you click you're button.

$('button').click(function() {
    var selectedItem = null;
    if($('.is-selected').length) {
        if (!$('.is-selected').is('li:last')) {
          selectedItem = $('.is-selected').next();
        }
        $('.is-selected').removeClass('is-selected');
    }
    
    if (!selectedItem) {
       selectedItem = $('ul').children().first();
    }
    
    selectedItem.addClass('is-selected');
});
.is-selected {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>New York</li>
  <li>Los Angeles</li>
  <li>Chicago</li>
</ul>

<button type='button'>Click Me!</button>

Upvotes: 0

Sree Nath
Sree Nath

Reputation: 543

HTML: 

 <ul>
      <li>sdf</li>
      <li>sddsdfs</li>
    </ul>

    <button>Click</button>

JS: 

var count=1;
var length = $('ul').children().length;
$('button').on('click', function(){
    count =( count ==length) ? 0: count;
    if(count>1 && count <= length){
  $('ul li:nth-child('+(count - 1)+')').css("color", "");
    $('ul li:nth-child('+count+')').css("color", "red");
  }
  else{
        $('ul li:nth-child('+count+')').css("color", "red");
  }
  count++;
})

You could do something like this.

Upvotes: 0

MrManafon
MrManafon

Reputation: 314

You need to keep a count. So, you would have a separate variable which verifies that this is the first click. If it is a first click, we select .eq(0) or .first(). If not, se always select .next().

Let's take a look at how that would work in practice, on your example. HTML would stay the same, and JS would change:

var alreadyClicked = false;
var selectedElement;

$('ul li').on('click', function() {
  if (alreadyClicked) {
    selectedElement = selectedElement.next();
  } else {
    alreadyClicked = true;
    selectedElement = $('ul li').first();
  }
  
  selectedElement.css('color', 'red');
  
});
<ul>
  <li>New York</li>
  <li>Los Angeles</li>
  <li>Chicago</li>
</ul>

  <script src="https://code.jquery.com/jquery-git.js"></script>

As you can see, we are keeping count inside the alreadyClicked boolean. If it is false, we will select the first element, otherwise, we always move up by one.

Additionally, we can improve the code by removing the alreadyClicked entirely, and just checking if selectedElement is already filled.

Upvotes: 0

charlietfl
charlietfl

Reputation: 171669

Adding a selected class is about the easiest then you can traverse to next() or first() depending if the current selected is last in the group or not

$('button').click(function() {
  var $items = $('li'),
    $selected = $items.filter('.selected').removeClass('selected'),
    $next;
  // first time only when no selected exists, remove if you automatically select first one
  if (!$selected.length) {
    $next = $items.first();
  } else {
    $next = $selected.is($items.last()) ? $items.first() : $selected.next();
  }

  $next.addClass('selected')
});
.selected {
  color: red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>New York</li>
  <li>Los Angeles</li>
  <li>Chicago</li>
</ul>
<button>Toggle selections</button>

Upvotes: 2

Related Questions