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

时间:2015-08-19 09:02:21

标签: javascript jquery html css

所以我想要实现的是当我点击按钮时 下面的内容应该滚动那么多它应该只显示 列表中的最后一个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>

2 个答案:

答案 0 :(得分:0)

// 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

答案 1 :(得分:0)

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