Question

采用这种html结构，我需要抓住选择器3个项目。但是，此代码包含在.each()语句中，我使用$(this)。更不用说，我正在跳过前3项。

所以基本上，当我到达第4项时，我需要选择第1项;在项目＃5上，选择项目＃2，依此类推。

<div id="item-1" class="class">Item 1</div>
<div id="item-2" class="class">Item 2</div>
<div id="item-3" class="class">Item 3</div>
<div id="item-4" class="class">Item 4</div>
<div id="item-5" class="class">Item 5</div>
<div id="item-6" class="class">Item 6</div>
<div id="item-7" class="class">Item 7</div>
<div id="item-8" class="class">Item 8</div>
<div id="item-9" class="class">Item 9</div>
<div id="item-10" class="class">Item 10</div>

我正在尝试输出id属性以确保我拥有正确的属性。我尝试了.slice(-3)，.eq(-3)等等。连续使用3 .prev()确实有效，但必须有更简洁的方法。

$('.class').each(function(i){
  if (i > 2) {
    console.log($(this).prev().prev().prev().attr('id'));
  }
});

Answer 1

使用此，使用和eq()这将考虑将第一个元素编入索引为零，因此您需要使用eq(i-3)

$class = $('.class');
 $class.each(function(i){

 if (i > 2)
    console.log( $class.eq(i-3).attr('id'));

});

Answer 2

缓存选择，切掉前3个，然后直接索引集合。

要记录ID，只需使用DOM元素的.id属性。

var cls = $('.class');
cls.slice(3).each(function(i, el){
  console.log(cls[i].id, el.id);
});

＆＃13;

var pre = $("pre")[0];

var cls = $('.class');
cls.slice(3).each(function(i, el) {
  pre.textContent += cls[i].id + ", " + el.id  + "\n";
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="item-1" class="class">Item 1</div>
<div id="item-2" class="class">Item 2</div>
<div id="item-3" class="class">Item 3</div>
<div id="item-4" class="class">Item 4</div>
<div id="item-5" class="class">Item 5</div>
<div id="item-6" class="class">Item 6</div>
<div id="item-7" class="class">Item 7</div>
<div id="item-8" class="class">Item 8</div>
<div id="item-9" class="class">Item 9</div>
<div id="item-10" class="class">Item 10</div>
<pre></pre>

＆＃13;

或者没有jQuery：

var cls = document.querySelectorAll('.class');
[].slice.call(cls, 3).forEach(function(el, i){
  console.log(cls[i].id, el.id);
});

＆＃13;

var pre = document.querySelector("pre");

var cls = document.querySelectorAll('.class');
[].slice.call(cls, 3).forEach(function(el, i){
  pre.textContent += cls[i].id + ", " + el.id  + "\n";
});

＆＃13;

<div id="item-1" class="class">Item 1</div>
<div id="item-2" class="class">Item 2</div>
<div id="item-3" class="class">Item 3</div>
<div id="item-4" class="class">Item 4</div>
<div id="item-5" class="class">Item 5</div>
<div id="item-6" class="class">Item 6</div>
<div id="item-7" class="class">Item 7</div>
<div id="item-8" class="class">Item 8</div>
<div id="item-9" class="class">Item 9</div>
<div id="item-10" class="class">Item 10</div>
<pre></pre>

＆＃13;

Answer 3

所以你可以使用：

$('.class').each(function(i){
  if (i > 2) {
    console.log($('.class').eq(i-3).attr('id'));
  }
});

Answer 4

你应该尝试以下：

$('.class').slice(0,-3).each(function(){
  console.log($(this).attr('id'));
});

jQuery在.each（）中选择此元素的第n个元素

4 个答案: