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

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

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

使用

结果如下

• 地图一
• 地图二
• 地图

但是现在我不知道如何为每个图像指定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>

---

您可以使用的setter版本，然后可以返回下一个元素（即

映射
元素）的id，前缀为
#

演示：
您不需要中间变量。您只需获取上一个
img
元素并直接设置其id即可：

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

console.log($mapid);

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

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

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