CODEWITHSUNDEEP
javascriptjquery
FeelRightz
FeelRightz

Reputation: 2999

Jquery Add Class on sixth img

I have multiple image inside a div and using a jquery function to calculate. If image if more than six, then the sixth image will be given a new class. Any idea how to do this ? Thanks

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

Upvotes: 1

Views: 93

Answers (5)

Lumi Lu
Lumi Lu

Reputation: 3305

Try this,

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

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

Upvotes: 1

shanidkv
shanidkv

Reputation: 1103

Try below code.

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

Upvotes: 1

Chandrakant Chavan
Chandrakant Chavan

Reputation: 1

$(function(){ var imglength = $(".shopbar_smallimg_container img").length;

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

})

Upvotes: 0

Amit Joki
Amit Joki

Reputation: 59252

You just need to use css, there is no need for any javascript

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

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388326

You can add use .eq() - it uses 0 based index so to target 6th img, you need to use index as 5

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

Upvotes: 0

Related Questions