how can I switch between positions and also switch value of an input with same class name inside the-CodePudding

I have a list like this:

<ul>
  <li>1 
     <a class='up' href='#'>up</a> 
     <a class='down' href='#'>down</a>
     <input type="hidden" class="order" value="1"></input>
  </li>
  <li>2
     <a class='up' href='#'>up</a> 
     <a class='down' href='#'>down</a>
     <input type="hidden" class="order" value="2"></input>
  </li>
  <li>3 
     <a class='up' href='#'>up</a> 
     <a class='down' href='#'>down</a>
     <input type="hidden" class="order" value="3"></input>
  </li>
  <li>4 
     <a class='up' href='#'>up</a> 
     <a class='down' href='#'>down</a>
     <input type="hidden" class="order" value="4"></input>
  </li>
</ul>

I want Switch positions up or down.

I do that with this code

$(function() {
  $('.up').on('click', function(e) {
    var wrapper = $(this).closest('li')
    wrapper.insertBefore(wrapper.prev())
  })
  $('.down').on('click', function(e) {
    var wrapper = $(this).closest('li')
    wrapper.insertAfter(wrapper.next())
  })
})

But how can I change inputs value (with same class name) for each up or down click? Note: I only access name of class for inputs.(not Id or name of input).

this is a live demo

CodePudding user response：

Try this:

    $(function () {
        $('.up').on('click', function (e) {
            var wrapper = $(this).closest('li')
            wrapper.insertBefore(wrapper.prev())
        })
        $('.down').on('click', function (e) {
            var wrapper = $(this).closest('li')
            wrapper.insertAfter(wrapper.next())
        })
        $('.down,.up').click(function(){
            var inputs = $(this).parents('ul').find('.order');
            $.each(inputs, function (i, input) {
                $(input).val(i   1);
            });
        });
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
    <li>1
        <a class='up' href='#'>up</a>
        <a class='down' href='#'>down</a>
        <input type="hidden" class="order" value="1"></input>
    </li>
    <li>2
        <a class='up' href='#'>up</a>
        <a class='down' href='#'>down</a>
        <input type="hidden" class="order" value="2"></input>
    </li>
    <li>3
        <a class='up' href='#'>up</a>
        <a class='down' href='#'>down</a>
        <input type="hidden" class="order" value="3"></input>
    </li>
    <li>4
        <a class='up' href='#'>up</a>
        <a class='down' href='#'>down</a>
        <input type="hidden" class="order" value="4"></input>
    </li>
</ul>

CodePudding user response：

Use this function to update the values:

function changevalue(){
var menus = document.getElementsByClassName("order");
for (var i = menus.length - 1; i >= 0; i--)
{
menus[i].value = i 1;
}
}

Try this:

$(function() {
  $('.up').on('click', function(e) {
    var wrapper = $(this).closest('li')
    wrapper.insertBefore(wrapper.prev())
    changevalue();
  })
  $('.down').on('click', function(e) {
    var wrapper = $(this).closest('li')
    wrapper.insertAfter(wrapper.next())
    changevalue();
  })
})
function changevalue(){
var menus = document.getElementsByClassName("order");
for (var i = menus.length - 1; i >= 0; i--)
{
menus[i].value = i 1;
}
}

ul li:first-child a.up,
ul li:last-child a.down {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>

<li>1 
      <a class='up' href='#'>up</a> 
      <a class='down' href='#'>down</a>
      <input type="hidden" class="order" value="1"/>
</li>

<li>2 
      <a class='up' href='#'>up</a> 
      <a class='down' href='#'>down</a>
      <input type="hidden" class="order" value="2"/>
</li>
 
<li>3 
     <a class='up' href='#'>up</a> 
     <a class='down' href='#'>down</a>
     <input type="hidden" class="order" value="3"/>
</li>
 
<li>4 
    <a class='up' href='#'>up</a> 
    <a class='down' href='#'>down</a>
    <input type="hidden" class="order" value="4"/>
</li>

<li>5 
    <a class='up' href='#'>up</a> 
    <a class='down' href='#'>down</a>
    <input type="hidden" class="order" value="5"/>
</li>

<li>6 
    <a class='up' href='#'>up</a> 
    <a class='down' href='#'>down</a>
    <input type="hidden" class="order" value="6"/>
</li>

</ul>