Question

我有以下div结构

<div class="block_content">
    <img src="image1.png">
</div>
<div class="block_content">
    <img src="image2.png">
</div>
<div class="block_content">
    <img src="image3.png">
</div>

现在我想隐藏image2和image3，我的代码是

 $(document).ready(function ($){
    $('div.block_content').each(function() 
    {
         if($("div.block_content:eq(1)").find('img').length)
         {
            $("div.block_content:eq(1)").addClass('hide-for-small');
         } 
         if($("div.block_content:eq(2)").find('img').length)
         {
            $("div.block_content:eq(2)").addClass('hide-for-small');
         } 
    });
  });

但上面的jquery代码什么也没做。我必须检查每个div，因为有时div只能内容文本。所以简而言之，如果文本然后显示所有三个div，则隐藏最后2个div。

非常欢迎任何帮助。提前谢谢。

Answer 1

尝试:nth-child - CSS

$(".block_content:not(:first-child) img").hide();

或只是css

.block_content:not(:first-child) img{ display:none}

如果您不想使用:not尝试此

.block_content:nth-child(n+2) img{ display:none}

或者这很难，但它也会起作用

img{ display:none}
.block_content:first-child img{ display:block}

或使用hidden attr

<div id="block1" class="block_content">
    <img src="image1.png" />
</div>
<div id="block_2" class="block_content">
    <img src="image2.png" hidden />
</div>
<div id="block_3" class="block_content">
    <img src="image3.png" hidden />
</div>

使用jquery隐藏第二个和第三个div中的图像

1 个答案: