Jquery 遍历属性值

Question

In Jquery I'm attempting to increment the attribute value of 5 list items such that their position in the list changes on the click of a forward and backward button, but does not exceed the 5 possible positions, or become a negative integer.

What I was trying to write was a function that checks for values < 5, and increments them by 1, and then decrements 5 by 4 to make it a position of 1, when #forward is clicked. Similarly, for clicking #backward, a function would check for values > 1 and decrement them by 1, and then increment 1 by 4 to make it a position of 5, essentially allowing for a control to loop the 5 list items through the 5 positions.

I'm using the following script:

//forward
$("#forward").click(function() {
  if ( $('li').attr('position') < 5 ) {
    $('li').attr('position', function(_, v) {
      return Number(v) + 1;
    });
  } else if ( $('li').attr('position') == 5 ) {
    $('li').attr('position', function(_, v) {
      return Number(v) - 4;
    });
  }
});
//backward
$("#backward").click(function() {
  if ( $('li').attr('position') > 1 ) {
    $('li').attr('position', function(_, v) {
      return Number(v) - 1;
    });
  } else if ( $('li').attr('position') == 1 ) {
    $('li').attr('position', function(_, v) {
      return Number(v) + 4;
    });
  }
});

Answer 1

You need to swap the position of the if statement and the attr function around, like this:

$("#forward").click(function() {
  $('li').attr('position', function(_, v) {
    if ($(this).attr('position') < 5) {
      return Number(v) + 1;
    } else if ($(this).attr('position') == 5) {
      return Number(v) - 4;
    }
  });
});
//backward
$("#backward").click(function() {
  $('li').attr('position', function(_, v) {
    if ($(this).attr('position') > 1) {
      return Number(v) - 1;
    } else if ($(this).attr('position') == 5) {
      return Number(v) + 4;
    }
  });
});

After swappering the if and attr, then we will change $('li').attr('position') < 5 to $(this).attr('position') < 5

Demo

 $("#forward").click(function() { $('li').attr('position', function(_, v) { if ($(this).attr('position') < 5) { return Number(v) + 1; } else if ($(this).attr('position') == 5) { return Number(v) - 4; } }); }); //backward $("#backward").click(function() { $('li').attr('position', function(_, v) { if ($(this).attr('position') > 1) { return Number(v) - 1; } else if ($(this).attr('position') == 5) { return Number(v) + 4; } }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="carousel-container"> <ul class="carousel"> <li id="1" class="story" position="1">1</li> <li id="2" class="story" position="5">2</li> <li id="3" class="story" position="4">3</li> <li id="4" class="story" position="2">4</li> <li id="5" class="story" position="3">5</li> </ul> </div> <nav class="control"> <ul> <li id="forward"><a href="#">forward<i class="fa-solid fa-caret-right"></i></a></li> <li id="backward"><a href="#">backward<i class="fa-solid fa-caret-left"></i></a></li> </ul> </nav>

Answer 2

If you only want to change the position attribute please try this.

 $(document).ready(function () { $("#forward").on("click", function(){ $('#list li').each(function(index, item){ const pos = parseInt($(this).attr('position')); const newPos = pos < 5? pos+1: 1; console.log(pos, newPos); $(this).attr('position', newPos);; }); }); $("#backward").on("click", function(){ $('#list li').each(function(index, item){ const pos = parseInt($(this).attr('position')); const newPos = pos > 1? pos-1: 5; console.log(pos, newPos) $(this).attr('position', newPos); }); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="backward">backward</div> <ul id="list"> <li position="1">1</li> <li position="2">2</li> <li position="3">3</li> <li position="4">4</li> <li position="5">5</li> </ul> <div id="forward">forward</div>

https://jsfiddle.net/b62uzqkf/