How to loop through a group of divs one by one on each click in jQuery?

46
September 03, 2019, at 6:10 PM

I'm trying to output the text of each span, one by one, within the respective group, every time I click its parent button.

I've tried different codes, but none of them worked for me. So, this is what I've been working on. http://jsfiddle.net/b6wfeaxz/2/

js / jQuery

$( ".button" ).on( "click", function(){
  $this = $(this);
  $this.find( '.letter' ).each(function() {
    $('.result').text($this.find('.letter').text());
  });
});

HTML5

<div class="result">A</div>
<div class="keypad">
  <div class="button">
    <div class="num">1</div>
    <span class="letter">A</span>
    <span class="letter">B</span>
    <span class="letter">C</span>
  </div>
  <div class="button">
    <div class="num">2</div>
    <span class="letter">D</span>
    <span class="letter">E</span>
    <span class="letter">F</span>
  </div>
  <div class="button">
    <div class="num">3</div>
    <span class="letter">G</span>
    <span class="letter">H</span>
    <span class="letter">I</span>
  </div>
</div>

Basically, I expect this to go back and forth with every click within the same button. In other words, I need this to work the same as a telephone keypad function, but the actual output is all three letters at once.

Answer 1

Here's the fix, I realise this may not be the tidiest solution so feel free to edit:

var index     = 0;
var direction = 1;
$(".button").on("click", function () {
  var $this = $(this);
  if ($this.hasClass("selected")) {
    if (index >= $this.find(".letter").length - 1) {
        direction *= -1;
    } else if (direction == -1 && index == 0) {
        direction *= -1;
    }
    index += direction;
  } else {
    $(".button").removeClass("selected");
    $this.addClass("selected");
    index = 0;
  }
  var result = $(this).children(".letter").eq(index).text();
  $(".result").text(result);
});

http://jsfiddle.net/cndaeh7q/6/

READ ALSO
Open all pages on index page in sertain div [on hold]

Open all pages on index page in sertain div [on hold]

I have a indexhtml page with multipe links (only showing 3 here)

26
Change width of all elements in loop separately with jQuery [on hold]

Change width of all elements in loop separately with jQuery [on hold]

I have a Wordpress custom post type for teammembers, and want to show them in a masonry layout using flexbox

36
Toggle checked radio button on click div [on hold]

Toggle checked radio button on click div [on hold]

I use two divs as buttons and use jquery toggle active on event clickCan anyone help me to add attribute checked to radio button inside those two divs?

34
Why does the jquery change event not trigger when I set the value of a select using val()?

Why does the jquery change event not trigger when I set the value of a select using val()?

The logic in the change() event handler is not being run when the value is set by val(), but it does run when user selects a value with their mouseWhy is this?

50