Question

如何在块中仅显示名称中包含“小”等文本的图像。仅显示picture2_small.gif和picture4_small.gif。在另一个块中显示所有'em。

<div class="small_images">
  <img src="picture1.gif" />
  <img src="picture2_small.gif" />
  <img src="picture3.gif" />
  <img src="picture4_small.gif" />
</div>

<div class="all_images">
  <img src="picture1.gif" />
  <img src="picture2_small.gif" />
  <img src="picture3.gif" />
  <img src="picture4_small.gif" />
</div>

Answer 1

尝试使用选择器

$('img[src*="_small"]').show();

Answer 2

使用以下选择器之一

img[src$='small.gif'] - 仅显示src 结尾的图片 small.gif

或

img[src*='small'] - 仅在src中显示包含小字的图像。

使用CSS

.small_images img[src$='small.gif']{
    display: block;
}
/* or */

.small_images img[src*='small']{
    display: block;
}

使用jQuery

$('.small_images img[src$="small.gif"]').show();
/* or */
$('.small_images img[src$="small.gif"]').css('display','block');

/* or */

$('.small_images img[src*="small"]').show();
/* or */
$('.small_images img[src*="small"]').css('display','block');

其他信息：（根据您对问题的更改）

添加.small_images可确保display仅设置为img元素下的class='small_images'个标记。

Answer 3

要显示那些小而隐藏其他人的尝试，

   $(document).ready(function(){
$('img').each(function(){
    var $img = $(this);
    if($img.attr("src").indexOf("small")!=-1){
        $img.show();
    }else{
        $img.hide();
    }
});});

http://jsfiddle.net/3KcYk/

Answer 4

简单;

你可以使用;

<div class="small_images">
<img src="picture1.gif" />
<img src="picture2_small.gif" />
<img src="picture3.gif" />
<img src="picture4_small.gif" />
</div>

对于div中的图像，请使用样式;

.small_images img{
    display: none;
}

然后在您的javascript中，显示包含＆＃34; small＆＃34;等文字的图片，您已提及使用;

$('img[src*="small"]').show();

这是 demo

如何按名称显示图像（前缀）

4 个答案: