CODEWITHSUNDEEP
javascripthtmljquery
Devhs
Devhs

Reputation: 3

Select second child image & apply style to it jquery

Here is the div structure

<div class="amlabel-div categoryp_productflag_image_615448">
  <a href="https://www.web.com/bat-wing-sunglasses-black.html">
    <img src="https://www.web.com/skin/frontend/web/web/images/category/wph.png" alt="">
    <figure class="hidden-xs hidden-sm rollover-images" data-display="control">
      <img data-display="basic" src="https://media.web.com/media/uU0gFAsQ67eMTBqvFm2PuG8ahps4GadG-32.jpg" width="460" height="580" alt="Batting My Lashes Sunglasses">
      <img data-display="hover" src="https://media.web.com/media/Y8GSIn508Nnh1Rs7F1VVK7xIERYvvg0T-32.jpg" width="460" height="580" alt="Batting My Lashes Sunglasses">
    </figure>
    <img class="visible-xs visible-sm" src="https://media.web.com/media/uU0gFAsQ67eMTBqvFm2PuG8ahps4GadG-32.jpg" width="460" height="580" alt="Batting My Lashes Sunglasses">
  </a>
  <button type="button" data-role="none" class="slick-prev" aria-label="previous" style="width: 40px;">&lt;</button>
</div>

Here is what i am trying to add display none the second image in a href in aboove html but its not working

jQuery('button.slick-prev').click(function(){
    jQuery(this).parent().find("a img:eq( 2 )").attr("style", "display: none !important");
});

Any thoughts ?

Upvotes: 0

Views: 344

Answers (3)

Chandrapal Chetan
Chandrapal Chetan

Reputation: 61

try below click event function.

$('.slick-prev').on('click',function() {
  $(this).parent().find("figure img:eq(1)").css('display', 'none');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="amlabel-div categoryp_productflag_image_615448">
  <a href="https://www.web.com/bat-wing-sunglasses-black.html">
    <img src="https://www.web.com/skin/frontend/web/web/images/category/wph.png" alt="Batting My Lashes Sunglasses1">
    <figure class="hidden-xs hidden-sm rollover-images" data-display="control">
      <img data-display="basic" src="https://media.web.com/media/uU0gFAsQ67eMTBqvFm2PuG8ahps4GadG-32.jpg" width="460" height="580" alt="Batting My Lashes Sunglasses2">
      <img data-display="hover" src="https://media.web.com/media/Y8GSIn508Nnh1Rs7F1VVK7xIERYvvg0T-32.jpg" width="460" height="580" alt="Batting My Lashes Sunglasses3">
    </figure>
    <img class="visible-xs visible-sm" src="https://media.web.com/media/uU0gFAsQ67eMTBqvFm2PuG8ahps4GadG-32.jpg" width="460" height="580" alt="Batting My Lashes Sunglasses4">
  </a>
  <button type="button" data-role="none" class="slick-prev" aria-label="previous" style="width: 40px;">&lt;</button>
</div>

Upvotes: 1

ikiK
ikiK

Reputation: 6532

Its working, but you are removing 3ed image because .eg() selector works as index starting at 0...

Also use CSS selector > to find siblings of a element and exclude a's in figure.

.parent().find("a > img:eq( 1 )")

And you should use .css("...","...") to add styles not attr

https://api.jquery.com/eq/

jQuery('button.slick-prev').click(function() {
  jQuery(this).parent().find("a > img:eq( 1 )").attr("style", "display: none !important");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="amlabel-div categoryp_productflag_image_615448">
  <a href="https://www.web.com/bat-wing-sunglasses-black.html">
    <img src="https://www.web.com/skin/frontend/web/web/images/category/wph.png" alt="Batting My Lashes Sunglasses1">
    <figure class="hidden-xs hidden-sm rollover-images" data-display="control">
      <img data-display="basic" src="https://media.web.com/media/uU0gFAsQ67eMTBqvFm2PuG8ahps4GadG-32.jpg" width="460" height="580" alt="Batting My Lashes Sunglasses2">
      <img data-display="hover" src="https://media.web.com/media/Y8GSIn508Nnh1Rs7F1VVK7xIERYvvg0T-32.jpg" width="460" height="580" alt="Batting My Lashes Sunglasses3">
    </figure>
    <img class="visible-xs visible-sm" src="https://media.web.com/media/uU0gFAsQ67eMTBqvFm2PuG8ahps4GadG-32.jpg" width="460" height="580" alt="Batting My Lashes Sunglasses4">
  </a>
  <button type="button" data-role="none" class="slick-prev" aria-label="previous" style="width: 40px;">&lt;</button>
</div>

Upvotes: 0

Stefan Gabos
Stefan Gabos

Reputation: 1471

Try this one

// eq() is 0-based, so eq(1) will be second image, inside the <figure> tag
$('.slick-prev').parent().find('figure img').eq(1).css('display', 'none')

Upvotes: 0

Related Questions