如何在j查询中点击显示最后一个li

how to show last li on click in j query?

本文关键字：显示 最后一个 li 查询      更新时间：2023-09-26

所以我试图实现的是，当我点击按钮时下面的内容应该滚动到只显示的程度列表中的最后一个li项目，我对此使用j查询，但不是工作

	 $('button').click(function() {
	   var m = "-680px";
	   $('ul').animate({
	     marginLeft: '+=' + m
	   }, 500);
	 });
div {
  overflow: hidden;
  width: 500px;
}
ul {
  width: 2000px;
  list-style: none;
  padding: 0;
  margin: 0;
}
li {
  display: inline;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<button>click</button>
<div>
  <ul>
    <li>some text</li>
    <li>some text</li>
    <li>some text</li>
    <li>some text</li>
    <li>some text</li>
    <li>some text</li>
    <li>some text</li>
    <li>some text</li>
    <li>some text</li>
    <li>some text</li>
    <li>some text</li>
    <li>some text</li>
    <li>some text</li>
    <li>some text</li>
    <li>some text</li>
    <li>some text</li>
    <li>some text</li>
    <li>some text</li>
    <li>some text</li>
    <li>some text</li>
    <li>some text</li>
    <li>some text</li>
    <li>some text</li>
    <li>some text</li>
    <li>some text</li>
    <li>some text</li>
    <li>some text</li>
    <li>some text</li>
    <li>some text</li>
    <li>some text</li>
  </ul>
</div>

// Code goes here 
$(document).ready(function(){ 
$('button').click(function() {
  var width = $('ul').find('li:last-child').css('width');
  var m =-($('ul').find('li:last-child').offset().left);
   var left = parseInt(m)+parseInt(width);
   alert(left);
   $('ul').animate({
     marginLeft: '+=' + left
   }, 500);
 });  
});

http://plnkr.co/edit/Tv6o4dYaq7FtqpRtBfzw?p=preview

您可以使用.last((来获取元素的最后一次出现。$( "li" ).last()

相关文章：