Jquery Add Class on sixth img

Jquery Add Class on sixth img

本文关键字：sixth img on Class Add Jquery      更新时间：2023-09-26

我在div内有多个图像，并使用jquery函数进行计算。如果图像超过六个，则第六个图像将被赋予一个新的class。知道如何做到这一点吗？谢谢

$(function(){
	var imglength = $(".shopbar_smallimg_container img").length;
	
	if(imglength > 6){
		$(".shopbar_smallimg_container img").attr("class","");
	}
		
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="shopbar_smallimg_container">
                    <div class="swiper-nav swiper-container">
                        <div class="swiper-wrapper">
                                <div class="swiper-slide"><img src="img/t.jpg" /></div>
                                <div class="swiper-slide"><img src="img/black.jpg" /></div>
                                <div class="swiper-slide"><img src="img/blue.jpg" /></div>
                                <div class="swiper-slide"><img src="img/t.jpg" /></div>
                                <div class="swiper-slide"><img src="img/t.jpg" /></div>
                                <div class="swiper-slide"><img src="img/black.jpg" /></div>
                                <div class="swiper-slide"><img src="img/blue.jpg" /></div>
                                <div class="swiper-slide"><img src="img/t.jpg" /></div>
                        </div>
                    </div>
              </div>

尝试下面的代码。

.HTML 

<div class="shopbar_smallimg_container">
  <div class="swiper-nav swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <img src="img/t.jpg" />
      </div>
      <div class="swiper-slide">
        <img src="img/black.jpg" />
      </div>
      <div class="swiper-slide">
        <img src="img/blue.jpg" />
      </div>
      <div class="swiper-slide">
        <img src="img/t.jpg" />
      </div>
      <div class="swiper-slide">
        <img src="img/t.jpg" />
      </div>
      <div class="swiper-slide">
        <img src="img/black.jpg" />
      </div>
      <div class="swiper-slide">
        <img src="img/blue.jpg" />
      </div>
      <div class="swiper-slide">
        <img src="img/t.jpg" />
      </div>
    </div>
  </div>
</div>

jQuery

$( ".swiper-wrapper div.swiper-slide:nth-child(6)").find('img').addClass("sixth");

JSFIDDLE 演示

试试这个，

$(function(){
  if($(".shopbar_smallimg_container img").length> 6){
    $(".shopbar_smallimg_container img:eq(5)").addClass('newClass');
  }
});

http://www.w3schools.com/jquery/sel_eq.asp

你可以添加使用 .eq（） - 它使用基于 0 的索引，所以要针对第 6 个img，你需要使用索引作为5 

$(function () {
    var $imgs = $(".shopbar_smallimg_container img");
    if ($imgs.length > 6) {
        $imgs.eq(5).addClass('newclass')
    }
})

你只需要使用 css，不需要任何 JavaScript

.swiper-slide:nth-child(6):not(:last-child) img {
  /* add style here */
}

$（function（）{ var imglength = $（".shopbar_smallimg_container img"）.length;

if(imglength > 6){
    $(".shopbar_smallimg_container img:eq(5)").attr("class","myclass");
}

}）

相关文章：