使用JQuery从另一个元素的id为图像分配属性

时间:2015-03-06 07:20:32

标签: javascript jquery html attributes

我有一个列表,列表中的每个项目都包含一个图像和一个地图

<ul class="slides">
<li>
  <img src="slide1.jpg" />
  <map id="map-one"></map>
</li>
<li>
  <img src="slide2.jpg" />
  <map id="map-two"></map>
</li>
<li>
  <img src="slide3.jpg" />
  <map id="map-thre"></map>
</li>

要在img标签上使用地图,我应该添加属性usemap,例如在列表的第一个元素中

<li>
  <img src="slide1.jpg" usemap="#map-one" />
  <map id="map-one"></map>
</li>

获取我用JQuery

完成以下地图的id
var $mapid;

$('.slides li map').each(function(i, elem) {
  var $this = $(this);
  $mapid = $this.attr('id');
});
使用

console.log($mapid);

结果如下

  • 地图酮
  • 地图二
  • 地图THRE

但现在我不知道为每个图像分配了usemap属性,而该属性的值是用于坐标的地图的id。

像这样

<ul class="slides">
<li>
  <img src="slide1.jpg" usemap="#map-one" />
  <map id="map-one"></map>
</li>
<li>
  <img src="slide2.jpg" usemap="#map-two" />
  <map id="map-two"></map>
</li>
<li>
  <img src="slide3.jpg" usemap="#map-thre" />
  <map id="map-thre"></map>
</li>

2 个答案:

答案 0 :(得分:0)

您可以使用.attr()的setter版本,然后您可以返回前缀为map的下一个元素(#元素)的ID

$('.slides li img').attr('usemap', function (i, elem) {
    return '#' + $(this).next().attr('id')
});

演示:Fiddle

答案 1 :(得分:0)

您不需要中间变量。您可以直接获取之前的img元素并设置其ID:

$('.slides li map').each(function () {
    $(this).prev('img').attr('id', '#' + this.id);
});