在 jquery 中更新自定义数据属性名称答案

【问题标题】：Update custom data attribute name in jquery在 jquery 中更新自定义数据属性名称
【发布时间】：2014-04-23 12:40:13
【问题描述】：

我的页面上有几个列表，请参见下面的示例

    <div id="test1" class="testlist">
        <ul>
            <li title="test" data-view="0">Any</li>
            <li title="test" data-view="101">list item 101</li>
            <li title="test" data-view="102">list item 102</li>
            <li title="test" data-view="103">list item 103</li>
            <li title="test" data-view="104">list item 104</li>
            <li title="test" data-view="105">list item 105</li>
            <li title="test" data-view="106">list item 106</li>
            <li title="test" data-view="107">list item 107</li>
            <li title="test" data-view="108">list item 108</li>
            <li title="test" data-view="109">list item 109</li>
        </ul>
    </div>

    <div id="test2"  class="testlist">
        <ul>
            <li title="test" data-view="0">Any</li>
            <li title="test" data-view="101">list item 101</li>
            <li title="test" data-view="102">list item 102</li>
            <li title="test" data-view="103">list item 103</li>
            <li title="test" data-view="104">list item 104</li>
            <li title="test" data-view="105">list item 105</li>
            <li title="test" data-view="106">list item 106</li>
            <li title="test" data-view="107">list item 107</li>
            <li title="test" data-view="108">list item 108</li>
            <li title="test" data-view="109">list item 109</li>
        </ul>
    </div>

我希望 data-view 属性具有父 ID 的名称。

例如：在第一个列表中 data-view 应该被称为 data-viewtest1 而在第二个列表中它们应该是 data-viewtest2

我有以下js：

        $("li").each(function () {
            var id = $('.testlist').attr('id') || '';
            console.log(id);
            $(this).attr({
                newData: $(this).attr('data-view'),
                //data-view: $(this).attr('data-view'),
            })
                .removeAttr('data-view');
        });

我可以替换属性 data-view 并将其命名为 newData 但如果我尝试将其重命名为 data-view

我收到语法错误

SyntaxError: missing : after property id

有没有办法重命名数据属性？我希望它是：

data-view +  id: $(this).attr('data-view'),

同样在 console.log 中我得到 20 个 test1 我应该得到 10 个 test1 和 10 个 test2，还有其他方法可以解决这个问题吗？

查看完整示例：

$("li").each(function() {
  var id = $('.testlist').attr('id') || '';
  console.log(id);
  $(this).attr({
      newData: $(this).attr('data-view'),
      //data-view: $(this).attr('data-view'),
    })
    .removeAttr('data-view');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="test1" class="testlist">
  <ul>
    <li title="test" data-view="0">Any</li>
    <li title="test" data-view="101">list item 101</li>
    <li title="test" data-view="102">list item 102</li>
    <li title="test" data-view="103">list item 103</li>
    <li title="test" data-view="104">list item 104</li>
    <li title="test" data-view="105">list item 105</li>
    <li title="test" data-view="106">list item 106</li>
    <li title="test" data-view="107">list item 107</li>
    <li title="test" data-view="108">list item 108</li>
    <li title="test" data-view="109">list item 109</li>
  </ul>
</div>

<div id="test2" class="testlist">
  <ul>
    <li title="test" data-view="0">Any</li>
    <li title="test" data-view="101">list item 101</li>
    <li title="test" data-view="102">list item 102</li>
    <li title="test" data-view="103">list item 103</li>
    <li title="test" data-view="104">list item 104</li>
    <li title="test" data-view="105">list item 105</li>
    <li title="test" data-view="106">list item 106</li>
    <li title="test" data-view="107">list item 107</li>
    <li title="test" data-view="108">list item 108</li>
    <li title="test" data-view="109">list item 109</li>
  </ul>
</div>

【问题讨论】：

即使看到你的 jsFiddle，我仍然不清楚你在找什么？！请注意，使用 $(selector).attr('id') 只会返回第一个匹配的元素 ID
您对属性的设置和删除没有多大意义。这里的最终游戏是什么？你想完成什么？
我刚刚更新了我的答案，以满足您设置新属性的需要。
是的，你可以通过 $(this).attr('data-view',NEW_Value)

标签： javascript jquery html attr custom-data-attribute

【解决方案1】：

我不确定您要完成什么，但我会解决您的疑虑：

语法错误
将data-view 括在引号中。

20 test1 vs 10 test1 和 10 test2
当您执行$('.testlist').attr('id') 时，它只会使用选择器的第一个结果test1。尝试这样的事情：

var id = $(this).parents('.testlist').attr('id') || '';

http://jsfiddle.net/JLbKQ/5/

尝试动态设置属性名
试试object[property] = value 语法。像这样：

$("li").each(function () {
    var id = $(this).parents('.testlist').attr('id') || '',
        newAttributes = {};

    newAttributes['data-view-' + id] = $(this).attr('data-view');

    $(this).attr(newAttributes).removeAttr('data-view');
});

http://jsfiddle.net/JLbKQ/6/

【讨论】：

【解决方案2】：

改用.data()：

 $(this).data('view'),

更新：

  $("li").each(function () {
            var id = $(this).closest('.testlist').attr('id') || '';
                            console.log(id);
            $(this).data('view' +  id, $(this).data('view')).removeData('data');
            console.log($(this).data('view' +  id))
  });

工作演示：

$("li").each(function() {
  var id = $(this).closest('.testlist').attr('id') || '';
  console.log(id);

  $(this).data('view' + id, $(this).data('view')).removeData('data');

  console.log($(this).data('view' + id))
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="test1" class="testlist">
  <ul>
    <li title="test" data-view="0">Any</li>
    <li title="test" data-view="101">list item 101</li>
    <li title="test" data-view="102">list item 102</li>
    <li title="test" data-view="103">list item 103</li>
    <li title="test" data-view="104">list item 104</li>
    <li title="test" data-view="105">list item 105</li>
    <li title="test" data-view="106">list item 106</li>
    <li title="test" data-view="107">list item 107</li>
    <li title="test" data-view="108">list item 108</li>
    <li title="test" data-view="109">list item 109</li>
  </ul>
</div>

<div id="test2" class="testlist">
  <ul>
    <li title="test" data-view="0">Any</li>
    <li title="test" data-view="101">list item 101</li>
    <li title="test" data-view="102">list item 102</li>
    <li title="test" data-view="103">list item 103</li>
    <li title="test" data-view="104">list item 104</li>
    <li title="test" data-view="105">list item 105</li>
    <li title="test" data-view="106">list item 106</li>
    <li title="test" data-view="107">list item 107</li>
    <li title="test" data-view="108">list item 108</li>
    <li title="test" data-view="109">list item 109</li>
  </ul>
</div>

【讨论】：

这不会更新属性，只会更新数据对象属性。编辑：在这里你得到它，而不是设置它，虽然我理解 OP 的问题但不确定

【解决方案3】：

要么：

$(this).attr('data-view' +  id, $(this).attr('data-view'));

或者：

var attrs = {};
attrs['data-view' +  id] = $(this).attr('data-view');
$(this).attr(attrs);

【讨论】：

【解决方案4】：

DEMO

$(document).ready(function () {
    $('.testlist').each(function(){
        var d = $(this);
        var id = d.attr('id');
        d.find('li').each(function(){
            var li = $(this);
            var val = li.attr('data-view');
            li.attr('data-view'+id,val).removeAttr('data-view');
        });
    });
});

【讨论】：

【解决方案5】：

试试这个：

$('.testlist').each(function() {
    var id = this.id;
    $(this).find('li').each(function(){
        $(this)
        .attr('data-view' + id, $(this).attr('data-view'))
        .removeAttr('data-view');
    });
});

Demo

【讨论】：

【解决方案6】：

为什么要这样做？如果要给出唯一的名称，那么最好从父 ID 中搜索它们，

$("#test1").find("div[data-view='101']")

或

$("#test1 div[data-view='101']")

【讨论】：

【解决方案7】：

在这种情况下改变这个：

var id = $('.testlist').attr('id') || '';

为此

var id = $(this).parent().parent().attr('id') || '';

这就是你得到 20 test1 而不是 10 test1 10 test2 的原因

查看代码sn-p：

$("li").each(function() {
  var id = $(this).parent().parent().attr('id') || '';
  console.log(id);
  $(this).attr({
      newData: $(this).attr('data-view'),
      //data-view: $(this).attr('data-view'),
    })
    .removeAttr('data-view');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="test1" class="testlist">
  <ul>
    <li title="test" data-view="0">Any</li>
    <li title="test" data-view="101">list item 101</li>
    <li title="test" data-view="102">list item 102</li>
    <li title="test" data-view="103">list item 103</li>
    <li title="test" data-view="104">list item 104</li>
    <li title="test" data-view="105">list item 105</li>
    <li title="test" data-view="106">list item 106</li>
    <li title="test" data-view="107">list item 107</li>
    <li title="test" data-view="108">list item 108</li>
    <li title="test" data-view="109">list item 109</li>
  </ul>
</div>

<div id="test2" class="testlist">
  <ul>
    <li title="test" data-view="0">Any</li>
    <li title="test" data-view="101">list item 101</li>
    <li title="test" data-view="102">list item 102</li>
    <li title="test" data-view="103">list item 103</li>
    <li title="test" data-view="104">list item 104</li>
    <li title="test" data-view="105">list item 105</li>
    <li title="test" data-view="106">list item 106</li>
    <li title="test" data-view="107">list item 107</li>
    <li title="test" data-view="108">list item 108</li>
    <li title="test" data-view="109">list item 109</li>
  </ul>
</div>

也许是获取父 div id 的更好方法，但这适用于您的代码。

【讨论】：

【解决方案8】：

你可以这样做。

$(this).attr('data-view',NEW_Value);

【讨论】：