Question 36367 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery looping through attribute values

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

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    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/

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search