How can I select a specific AJAX response using .html()?
Here is my HTML
<ul class="feature-products">
</ul>
<div class="feature-btn">
<a href="#" class="back styleShwd-enbl styleCrl-white stxt12">back</a>
<a href="#" class="next styleShwd-enbl styleCrl-white stxt12">next</a>
</div>
Here is the AJAX response (inside my UL)
<li class="products">
.....
</li>
<li class="products">
.....
</li>
<li class="products">
.....
</li>
Here is my script to select AJAX response (w/css animation)
$('.back').click(function() {
var back_indent = parseInt($('.feature-products').css('left')) + $(".products").outerWidth(true);
$('.feature-products').animate({"left":back_indent},200,function()
{
$('.feature-products li:first-child').css({'left':back_indent});
$('.feature-products li:first-child').before($('.feature-products li:last-child'));
});
return false;
});
The problem is in the script, it can't select and get the value of back_indent, feature-products li:first-child.
i found my own solution. hope this page will help others.
first() & last() instead of :first-child & :last-child
$(".back").on('click', function(){
var back_indent = parseInt($('.feature-products').css('left')) + $(".products").outerWidth(true);
$('.feature-products').animate({"left":back_indent},200,function()
{
$(".feature-products li").first().css({'left':back_indent});
$(".feature-products li").first().before($(".feature-products li").last());
});
return false;
});