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).
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>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>