Question

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

＆＃13;

$(function(){
	var imglength = $(".shopbar_smallimg_container img").length;
	
	if(imglength > 6){
		$(".shopbar_smallimg_container img").attr("class","");
	}
		
})

＆＃13;

<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>

＆＃13;

Answer 1

试试这个，

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

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

Answer 2

尝试以下代码。

<强> 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 DEMO

Answer 3

你只需要使用css，就不需要任何javascript

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

Answer 4

您可以添加使用.eq() - 它使用基于0的索引，因此要定位到第6个img，您需要将索引用作5

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

Answer 5

$（函数（）{ var imglength = $（＆＃34; .shopbar_smallimg_container img＆＃34;）。length;

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

}）

Jquery在第六个img上添加类

5 个答案: