Question

我有一个清单

<ul>
    <li class="list_1">a</li>
    <li class="list_2">b</li>
    <li class="list_3">c</li>
    <li class="list_4">d</li>
</ul>

这是在旋转木马中，因此列表项目改变位置（1-2-3-4,2-3-4-1,3-4-1-2,4-1-2-3，。 ..）

我怎样才能找到，使用javascript，哪个项目在，第二个和第三个位置？

开始时，list_2和list_3位于第二和第三位置，在一个周期后，list_3和list_4位于第二和第三位置，等等

当我循环时，如何找出这些位置中的列表？对于初学者，我只需要在console.log()的控制台中看到它，例如：

第二名是list_3，第三名是list_4。

尝试过此但不起作用：

var $list_items = $(this).find('ul li');

$list_items.each(function(i,j){
    $(this).addClass('list_' + (i+1));
console.log($list_items.eq(2).attr('class'));
});

我正在使用$(this)，因为我的原始列表包含在div中，而且最初的列表没有类，所以我添加了它们。

Answer 1

一种方法是使用map()和index()来创建元素的类名和索引的数组，显然这取决于你想要的精确的内容找;但你的问题对你想要的结果有些模糊：

function mapIndices() {
         // iterate over the 'ul li' elements, forming a map:
  return $('ul li').map(function() {
    // returning the className (classes) of the element and its index amongst
    // siblings:
    return this.className + ': ' + $(this).index();
  // converting to an Array:
  }).get();
};

// this is just a simple trigger to move the elements,
// to demonstrate binding the function:
$('#change').on('click', function() {
  var ul = $('ul');
  ul.find('li:first-child').appendTo(ul);
  console.log(mapIndices());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="change">advance positions</button>
<ul>
  <li class="list_1">a</li>
  <li class="list_2">b</li>
  <li class="list_3">c</li>
  <li class="list_4">d</li>
</ul>

但是，如果您只是想知道哪个元素位于特定位置：

$('#change').on('click', function() {
  var ul = $('ul');
  ul.find('li:first-child').appendTo(ul);
  // bear in mind that JavaScript has zero-based indexing,
  // 2 is the index of third element, not the second:
  console.log(ul.find('li').eq(2));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="change">advance positions</button>
<ul>
  <li class="list_1">a</li>
  <li class="list_2">b</li>
  <li class="list_3">c</li>
  <li class="list_4">d</li>
</ul>

参考文献：

Answer 2

数组操作：

＆＃13;

var arr = $('li').get();            // http://api.jquery.com/get/
// var arr = ["aa","bb","cc","dd"]; // you can try also using this guy

function doIt(){
   if(this.id==="next") arr.push(  arr.shift() );  // send first to last
                   else arr.unshift( arr.pop() );  // send last to first
   $('ul').html( arr );
}
    
$('#prev, #next').on('click', doIt);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="prev">PREV</button>
<button id="next">NEXT</button>
  
<ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
    <li>d</li>
    <li>-----------</li>
</ul>

＆＃13;

Answer 3

首先给ul：

一个id / class

<ul id="mylist">
    <li class="list_1">a</li>
    <li class="list_2">b</li>
    <li class="list_3">c</li>
    <li class="list_4">d</li>
</ul>

使用jQuery访问第二个位置的'li'元素：

var second_li = $('#mylist').find('li')[1]; // to access 2nd li use index 1
var second_li_class = $(second_li).attr('class'); // second_li_class will be equal to 'list_2'
var second_li_content = $(second_li).html(); // second_li_content will be equal to 'b'

找到元素的位置

3 个答案: