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

问题描述

如何显示在只有图像的名称有一些文本，如小的图像。仅显示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> 
  

解决方案

使用以下选择器之一

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

或

img [src * ='small'] - 只显示包含

$ b

$ b

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

使用jQuery

  $（'small_images img [src $ =small.gif]'）show（）; 
 / *或* / 
 $（'。small_images img [src $ =small.gif]'）css（'display'，'block'）; 
 
 / *或* / 
 
 $（'。small_images img [src * =small]'）。 
 / *或* / 
 $（'。small_images img [src * =small]'）css（'display'，'block'）; 
  
 
 
 
 
 
 
 其他信息 （根据您对问题的更改）
 
 
 
添加 .small_images 会确保 display 仅设置为 class ='small_images'元素下的 img  c $ c>。
 
How to show in block only images which name have some text like "small". To show only  picture2_small.gif and picture4_small.gif. And in another block show all of '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>
 解决方案 
Use one of the below selectors
img[src$='small.gif'] - to display only images whose src ends with small.gif
or
img[src*='small'] - to display only images which contain the word small in its src.
Using CSS
.small_images img[src$='small.gif']{
    display: block;
}
/* or */

.small_images img[src*='small']{
    display: block;
}
Using 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');
Additional Info: (based on your change to the question) 
Adding .small_images would make sure that the display is set to only those img tags that are present under the element with class='small_images'.
                        
这篇关于如何按名称显示图片（前缀）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！