Cho mỗi phần tử đầu tiên, thứ hai và thứ ba một lớp duy nhất bằng cách sử dụng jQuery

Question

Tôi đang sử dụng bộ chọn jQuery để trả về các đối tượng.

Ví dụ var target = $('.target'); sẽ trả về 6 đối tượng.

Các đối tượng không có cùng cha mẹ.

tôi muốn cung cấp cho từng đối tượng lớp học như vậy:

target[0].addClass('top'); 
target[1].addClass('middle'); 
target[2].addClass('low'); 
target[3].addClass('top'); 
target[4].addClass('middle'); 
target[5].addClass('low'); 

Và vân vân ... Tôi nghĩ tôi có thể sử dụng một số mô đun. Tôi biết những điều sau đây là sai.

target.each(function(index){ 
    index += 1; 

    if (index % 3 === 0) { 
     $(this).addClass('low'); 
    } else if(index % 2 === 0) { 
     $(this).addClass('middle'); 
    } else { 
     $(this).addClass('top'); 
    } 
} 

Có cách nào dễ dàng để tôi xem xét không?

Answer 1

này nên làm những gì bạn muốn

var classes = ['top', 'middle', 'low']; 

target.each(function(index){ 
    $(this).addClass(classes[index % 3]); 
} 

---

Làm việc bản demo

var classes = ['top', 'middle', 'low']; 
 

 
$(function() { 
 
    var target = $('.target'); 
 
    target.each(function(index) { 
 
    $(this).addClass(classes[index % 3]); 
 
    }); 
 
});

.top { 
 
    color: red; 
 
} 
 
.middle { 
 
    color: green; 
 
} 
 
.low { 
 
    color: cyan; 
 
}

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

Answer 2

Bạn cần phải sử dụng các nhà điều hành mô đun, nhưng trước tiên hiểu cách hoạt động:

một% lợi nhuận b c khi và chỉ khi b chia ac, hay nói cách khác c là phần còn lại của bộ phận ơclit của một trên b.

Bây giờ điều này sẽ làm việc:

target.each(function(index){ 
    if (index % 3 === 0) { 
     $(this).addClass('low'); 
    } else if(index % 3 === 1) { 
     $(this).addClass('middle'); 
    } else { 
     $(this).addClass('top'); 
    } 
} 

Answer 3

Phương thức .each() của jQuery tăng thêm chỉ mục, vì vậy bạn không cần phải thực hiện tăng dần.

var target = $('.target'); 
target.each(function (i, el) { 
    switch (i % 3) { 
     default: 
      break; 
     case 0: 
      $(this).addClass("top") 
      break; 
     case 1: 
      $(this).addClass("middle") 
      break; 
     case 2: 
      $(this).addClass("bottom") 
      break; 
    } 

}); 

Answer 4

Vì yếu tố này không phải là con của cùng một phụ huynh, bạn nên thử một cái gì đó như thế này.

<div>Top 1</div> 
<div>Middle 1</div> 
<div>Low 1</div> 
<div>Top 2</div> 
<div>Middle 2</div> 
<div>Low 2</div> 

<script> 
$('div:nth-child(3n+1)').addClass("top"); 
$('div:nth-child(3n+2)').addClass("middle"); 
$('div:nth-child(3n+3)').addClass("low"); 
</script>