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

【问题标题】：How to show images by name (prefix)如何按名称（前缀）显示图像
【发布时间】：2013-10-18 12:31:33
【问题描述】：

如何仅在块中显示名称包含“小”等文字的图像。只显示picture2_small.gif 和picture4_small.gif。并在另一个区块中显示所有这些。

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

【问题讨论】：

抱歉 - 我根据您的解决方案创建了项目，因为没有使用 js）

标签： jquery css sorting select css-selectors

【解决方案1】：

试试选择器

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

【讨论】：

【解决方案2】：

使用以下选择器之一

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

或

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

使用 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' 的标签。

【讨论】：

【解决方案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/

【讨论】：

【解决方案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 中，显示带有“小”之类文字的图像，您提到过使用；

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

这是一个demo

【讨论】：