Jquery looping through attribute values-CodePudding

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;
    });
  }
});

CodePudding user response：

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 >
  <ul >
    <li id="1"  position="1">1</li>
    <li id="2"  position="5">2</li>
    <li id="3"  position="4">3</li>
    <li id="4"  position="2">4</li>
    <li id="5"  position="3">5</li>
  </ul>
</div>
<nav >
  <ul>
    <li id="forward"><a href="#">forward<i ></i></a></li>
    <li id="backward"><a href="#">backward<i ></i></a></li>
  </ul>
</nav>

CodePudding user response：

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/