jquery - 使用 jquery 选择源“srcset”

Question

我想知道如何使用 js 在我的代码中选择 spcecific 'srcset'。这是我实际上不工作的 js 代码：

var imgPath = $('.wp-post-image').attr('srcset');
$('.tax-product_tag .breadcrumbs').css('background', 'url(' + imgPath + ')');

这是 HTML：

<img width="300" height="300" src="//agothegoodlifestore.com/wp-content/uploads/2018/04/la-mericaine-300x300.jpg" class="attachment-woocommerce_thumbnail size-woocommerce_thumbnail wp-post-image" alt="" srcset="//agothegoodlifestore.com/wp-content/uploads/2018/04/la-mericaine-300x300.jpg 300w, //agothegoodlifestore.com/wp-content/uploads/2018/04/la-mericaine-150x150.jpg 150w, //agothegoodlifestore.com/wp-content/uploads/2018/04/la-mericaine-768x768.jpg 768w, //agothegoodlifestore.com/wp-content/uploads/2018/04/la-mericaine-1024x1024.jpg 1024w, //agothegoodlifestore.com/wp-content/uploads/2018/04/la-mericaine-575x575.jpg 575w, //agothegoodlifestore.com/wp-content/uploads/2018/04/la-mericaine-190x190.jpg 190w, //agothegoodlifestore.com/wp-content/uploads/2018/04/la-mericaine-370x370.jpg 370w, //agothegoodlifestore.com/wp-content/uploads/2018/04/la-mericaine-600x600.jpg 600w, //agothegoodlifestore.com/wp-content/uploads/2018/04/la-mericaine-100x100.jpg 100w, //agothegoodlifestore.com/wp-content/uploads/2018/04/la-mericaine-400x400.jpg 400w, //agothegoodlifestore.com/wp-content/uploads/2018/04/la-mericaine-900x900.jpg 900w, //agothegoodlifestore.com/wp-content/uploads/2018/04/la-mericaine-675x675.jpg 675w, //agothegoodlifestore.com/wp-content/uploads/2018/04/la-mericaine-286x286.jpg 286w, //agothegoodlifestore.com/wp-content/uploads/2018/04/la-mericaine-450x450.jpg 450w, //agothegoodlifestore.com/wp-content/uploads/2018/04/la-mericaine-1080x1080.jpg 1080w, //agothegoodlifestore.com/wp-content/uploads/2018/04/la-mericaine.jpg 1500w" sizes="(max-width: 300px) 100vw, 300px">

js代码正在使用'src'属性，但这是选择300x300 jpeg，我想获得原始jpeg（agothegoodlifestore.com/wp-content/uploads/2018/04/la-mericaine.jpg）

非常感谢帮助，第一次使用堆栈溢出，如果我的问题出错了，对不起。

标签： jqueryhtmlwebattrsrcset

Answer 1

$('img').each(function(){   //for loop all images
	var srcset=$(this).attr('srcset');  //attribut value
	var srcset_arr=srcset.split(', ');  //value to array
	for(var key in srcset_arr){         //loop array 
		if(key==srcset_arr.length-1){  //find last  element
		   var orig_image=(srcset_arr[key]).split(' ')[0];  //first element of sub array
		   console.log(orig_image);
		}

	}

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>



<img width="300" height="300" src="//agothegoodlifestore.com/wp-content/uploads/2018/04/la-mericaine-300x300.jpg" class="attachment-woocommerce_thumbnail size-woocommerce_thumbnail wp-post-image" alt="" srcset="//agothegoodlifestore.com/wp-content/uploads/2018/04/la-mericaine-300x300.jpg 300w, //agothegoodlifestore.com/wp-content/uploads/2018/04/la-mericaine-150x150.jpg 150w, //agothegoodlifestore.com/wp-content/uploads/2018/04/la-mericaine-768x768.jpg 768w, //agothegoodlifestore.com/wp-content/uploads/2018/04/la-mericaine-1024x1024.jpg 1024w, //agothegoodlifestore.com/wp-content/uploads/2018/04/la-mericaine-575x575.jpg 575w, //agothegoodlifestore.com/wp-content/uploads/2018/04/la-mericaine-190x190.jpg 190w, //agothegoodlifestore.com/wp-content/uploads/2018/04/la-mericaine-370x370.jpg 370w, //agothegoodlifestore.com/wp-content/uploads/2018/04/la-mericaine-600x600.jpg 600w, //agothegoodlifestore.com/wp-content/uploads/2018/04/la-mericaine-100x100.jpg 100w, //agothegoodlifestore.com/wp-content/uploads/2018/04/la-mericaine-400x400.jpg 400w, //agothegoodlifestore.com/wp-content/uploads/2018/04/la-mericaine-900x900.jpg 900w, //agothegoodlifestore.com/wp-content/uploads/2018/04/la-mericaine-675x675.jpg 675w, //agothegoodlifestore.com/wp-content/uploads/2018/04/la-mericaine-286x286.jpg 286w, //agothegoodlifestore.com/wp-content/uploads/2018/04/la-mericaine-450x450.jpg 450w, //agothegoodlifestore.com/wp-content/uploads/2018/04/la-mericaine-1080x1080.jpg 1080w, //agothegoodlifestore.com/wp-content/uploads/2018/04/la-mericaine.jpg 1500w" sizes="(max-width: 300px) 100vw, 300px">