jQuery 通过元素的 id 为数据属性添加值

Posted 2023-05-09

【中文标题】jQuery 通过元素的 id 为数据属性添加值

【英文标题】：jQuery add value for data attributes by element’s id

【发布时间】：2021-11-20 21:33:23

【问题描述】：

我有一个带有 svg 矢量地图的 wordpress 网站，供商店使用。我想通过 jquery 为与元素 id 相关的元素内的所有数据属性添加值。例如：

<svg>
<g class=“shop” id=“215” data-title=“” data-open=“”></g>
<g class=“shop” id=“217” data-title=“” data-open=“”></g>
<g class=“shop” id=“218” data-title=“” data-open=“”></g>
…
</svg>


<script>

$(“.shop”).attr(“id”);

$(“.shop”).find(“data-title”).val(“shop-name(‘id’)”);

$(“.shop”).find(“data-open”).val(“shop-opening-hours(‘id’)”);

</script>

结果：

<svg>
<g class=“shop” id=“215” data-title=“shop-name(‘215’)” data-open=“shop-opening-hours(‘215’)”></g>

<g class=“shop” id=“217” data-title=“shop-name(‘217’)” data-open=“shop-opening-hours(‘217’)”></g>

<g class=“shop” id=“218” data-title=“shop-name(‘218’)” data-open=“shop-opening-hours(‘218’)”></g>

…
</svg>

【参考方案1】：

试试这个：

    $.each($('svg .shop'), function (i, el) 
        var el = $(el);
        var id = el.attr('id');
        el.attr('data-title',`shop-name('$id')`);
        el.attr('data-open',`shop-opening-hours('$id')`);
    );

    console.log($('svg').html());

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<svg>
    <g class="shop" id="215" data-title="" data-open=""></g>
    <g class="shop" id="217" data-title="" data-open=""></g>
    <g class="shop" id="218" data-title="" data-open=""></g>
</svg>