Question

我需要找到具有某个img src的属性值。

<div class="ig_gallery_right_img" style="overflow-y: scroll">
  <img src="/corp/homeowner/images/promo/gallery_traditional_3_sm.jpg" 
            swap-section="featured_bath_traditional_1" 
            swap-image="/corp/homeowner/images/promo/gallery_traditional_3.jpg"              
            class="gallery_sidebar_sm" />
  <img src="/corp/homeowner/images/promo/gallery_traditional_5_sm.jpg" 
         swap-section="featured_bath_traditional_2" 
         swap-image="/corp/homeowner/images/promo/gallery_traditional_5.jpg" 
         class="gallery_sidebar_sm" />
</div>

我想知道是否有一种方法可以获得图像来源的swap-section值。

我试过了var ig_sec = $('img', url_main_pic).attr('swap-section');

但这给了我一个未定义的值。有任何想法吗？

Answer 1

使用attribute selector：

var ig_sec = $('img[src="'+url_main_pic+'"]').attr('swap-section');

Demo

此外，虽然您的代码以这种方式完全正常运行，但HTML不会通过W3C验证程序。如果这对您的用例很重要，您应该查看@PSL提到的data-*属性。

Answer 2

您可以使用属性选择器进行匹配。

 var value=  $('img[src="'+ url +'"]').attr("swap-section");

但swap-section和swap-image不是有效的html属性，因此您可能需要考虑为data-*添加前缀

<img src="/corp/homeowner/images/promo/gallery_traditional_3_sm.jpg" 
            data-swap-section="featured_bath_traditional_1" 
            data-swap-image="/corp/homeowner/images/promo/gallery_traditional_3.jpg"              
            class="gallery_sidebar_sm" />
  <img src="/corp/homeowner/images/promo/gallery_traditional_5_sm.jpg" 
         data-swap-section="featured_bath_traditional_2" 
         data-swap-image="/corp/homeowner/images/promo/gallery_traditional_5.jpg" 
         class="gallery_sidebar_sm" />

使用数据api

访问它

 var value=  $('img[src="'+ url +'"]').data("swap-section");

如果你想要一个通配符匹配，那么

var value=  $('img[src*="'+ url +'"]').data("swap-section"); //Remember for more than one match you will get the value of the first one alone. SO you may want to loop through.

Answer 3

这有帮助吗？

$('img[src$="gallery_traditional_3_sm.jpg"]').attr('swap-section');

从我收集的内容中，使用src前面的$符号将指定您最后只关心jpg文件名。如果您不使用$，则需要使用图像的完整路径（包括域）。即使您在声明元素时没有将域作为src的一部分，但在内部将域添加为属性的一部分，因此尝试使用相对src url查找图像将不起作用并且您将检索一个未定义的元素。

通过src查找属性的值

3 个答案: