jQuery以通用方式隐藏除第一个图像之外的所有图像

Question

I want to show only the first image and hide others, this is how HTML looks like:

<div class="slider-image">
  <img src="html.png" alt="Html" />
  <img src="css.png" alt="Css" />
  <img src="jquery.png" alt="jQuery" />
</div>

In this example I want to see html.png but I have to consider more images so I have to find a generic solution. I tried with:

$("div.slider-image").hide();
$("div.slider-image").eq(0).show();

but it shows every image, can someone help me?

Answer 1

use .not

Working snippet:

 $('.slider-image img').not(':eq(0)').hide();

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="slider-image"> <img src="html.png" alt="Html" /> <img src="css.png" alt="Css" /> <img src="jquery.png" alt="jQuery" /> </div>

Or use :not(:first-child)

Working snippet:-

 $('.slider-image img:not(:first-child)').hide();

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="slider-image"> <img src="html.png" alt="Html" /> <img src="css.png" alt="Css" /> <img src="jquery.png" alt="jQuery" /> </div>

Answer 2

Do you really need to use jQuery for this? You can achieve this with plain css:

.slider-image > img:not(:first-child) {
    display: none;
}

Answer 3

尝试这个：

$("div.slider-image img:not(:first-child)").hide();

Answer 4

<div class="slider-image">
            <img src="html.png" alt="Html" />
            <img src="css.png" alt="Css" class="hide_img"/>
            <img src="jquery.png" alt="jQuery" class="hide_img" />
        </div>

In script

$("div.slider-image .hide_img").hide();

Answer 5

您可以使用简单的一行 jQuery 代码...

$("div.slider-image img").eq(0).siblings('img').hide();

Answer 6

$('.slider-image img:not(:first-child)').css('opacity':0);

这不是正确的方法，但它的工作@Anant Singh 它给出了正确的答案，但它对你有用

Answer 7

You can try the below code. It's working perfectly. And image display in the center.

 $('.slider-image img:not(:first-child)').hide();

 .slider-image { display: block; margin-left: auto; margin-right: auto; width: 10%; }

 <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script> <div class="slider-image"> <img src="html.png" alt="Html" /> <img src="css.png" alt="Css" /> <img src="jquery.png" alt="jQuery" /> </div>