jQuery - повторение каждого() для каждого элемента(), но сброс между циклами

Question

Я хочу выполнить действие по первым 4 элементам каждой группы.

Проблема заключается в том, что, похоже, она не перезагружает счет, когда он выполняет итерацию через следующую группу.

В этом примере первые четыре элемента каждой группы должен быть красным, но он работает только на первой группе, а не второй ... пожалуйста, помогите :)

HTML

<div class="group"> 
    <div class="item">Item 1</div> 
    <div class="item">Item 2</div> 
    <div class="item">Item 3</div> 
    <div class="item">Item 4</div> 
    <div class="item">Item 5</div> 
    <div class="item">Item 6</div> 
    <div class="item">Item 7</div> 
</div> 
<div class="group"> 
    <div class="item">Item 1</div> 
    <div class="item">Item 2</div> 
    <div class="item">Item 3</div> 
    <div class="item">Item 4</div> 
    <div class="item">Item 5</div> 
    <div class="item">Item 6</div> 
    <div class="item">Item 7</div> 
</div> 

JQuery

var itemLimit = 4; 
$('.group').each(function(){ 
    $('.item').each(function(index, value){ 
    if(index < itemLimit){ 
     $(value).addClass('red') 
    } 
    }); 
}); 

CSS

.red{ 
    color: red; 
} 

здесь скрипку: https://jsfiddle.net/a4zja9th/

Answer 1

Ваш .itemindex относится к индексу всех этих .item вместе .

простой вариант будет использовать .find() и :lt() селектор

var itemLimit = 4; 
 

 
$(".group").find(".item:lt("+itemLimit+")").addClass("red");

.group{ 
 
    padding: 10px; 
 
} 
 
.red{ 
 
    color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="group"> 
 
    <div class="item">Item 1</div> 
 
    <div class="item">Item 2</div> 
 
    <div class="item">Item 3</div> 
 
    <div class="item">Item 4</div> 
 
    <div class="item">Item 5</div> 
 
    <div class="item">Item 6</div> 
 
    <div class="item">Item 7</div> 
 
</div> 
 
<div class="group"> 
 
    <div class="item">Item 1</div> 
 
    <div class="item">Item 2</div> 
 
    <div class="item">Item 3</div> 
 
    <div class="item">Item 4</div> 
 
    <div class="item">Item 5</div> 
 
    <div class="item">Item 6</div> 
 
    <div class="item">Item 7</div> 
 
</div>

Хотите сделать больше вещей, чем просто .addClass()? Используйте .each() на вашем уже отфильтрованной элементы коллекции:

$(".group").find(".item:lt("+itemLimit+")").each(function() { 
    // addClass 
    // or whatever you want 
}); 

---

1) выше, как я бы это сделать ...Теперь давайте объясним ваш вопрос:

// DON'T USE!! JUST FOR EXPLANATION: 
$('.group').each(function() { 
    $('.item').each(function(index, value) { // You're taking all .item from the DOM 

    console.log($(this).index(), index); // See the difference in console! 

    if($(this).index() < itemLimit) {  // Using $(this).index(); 
     $(value).addClass('red') 
    } 
    }); 
}); 

... причиной index является индексом каждого .item в коллекции все.item.
вместо $(this).index() фактический индекс из .itemв его родителей .group.

[jsFiddle с помощью .index() вместо .each(index] [1]

Для правильно относятся.itemребенок (это) .group вы могли бы использовать вместо $('.item', this).each( или $(this).find(".item").each(

var itemLimit = 4; 

$('.group').each(function() { 
    $('.item', this).each(function(index, value) { 
    if(index < itemLimit) { 
     $(value).addClass('red') 
    } 
    }); 
}); 

jsFiddle Fixed child reference

Answer 2

Ваша проблема заключается в том, что обращаясь к одному классу относится ко всем классам на странице, независимо от того, где они появляются. Вместо того, чтобы смотреть на children() каждой группы (и вы можете обратиться к классу, а)

$('.group').each(function(){ 
    $(this).children('.item').each(function(index, value){ 
    if(index < itemLimit){ 
     $(value).addClass('red') 
    } 
    }); 
}); 

Answer 3

Это просто :) Вы должны смотреть на дочерние элементы вашей текущей группы, , потому что «.item» широка селектор :) Вот скрипку: https://jsfiddle.net/a4zja9th/1/

HTML:

<div class="group"> 
    <div class="item">Item 1</div> 
    <div class="item">Item 2</div> 
    <div class="item">Item 3</div> 
    <div class="item">Item 4</div> 
    <div class="item">Item 5</div> 
    <div class="item">Item 6</div> 
    <div class="item">Item 7</div> 
</div> 
<div class="group"> 
    <div class="item">Item 1</div> 
    <div class="item">Item 2</div> 
    <div class="item">Item 3</div> 
    <div class="item">Item 4</div> 
    <div class="item">Item 5</div> 
    <div class="item">Item 6</div> 
    <div class="item">Item 7</div> 
</div> 

CSS:

.group{ 
    padding: 10px; 
} 
.red{ 
    color: red; 
} 

JavaScript (Jquery):

var itemLimit = 4; 

$('.group').each(function(index,value){ 
    $(value).children(".item").each(function(index, value){ 
    if(index < itemLimit){ 
     $(value).addClass('red') 
    } 
    }); 
});