Update custom data attribute name in jquery

Question

I have a list several lists on my page see example below

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

I want the data-view attribute to have the name of the parent id.

Eg: in the first list data-view should be called data-viewtest1 and in the second list they should be data-viewtest2

I have the below 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');
        });

I can replace the attribute data-view and call it newData but if I try and rename it data-view

I get the syntax error

SyntaxError: missing : after property id

Is there a way to rename a data attribute? I want it to be :

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

Also in the console.log I get 20 test1 where I should be getting 10 test1 and 10 test2, is there another way to approach this?

See full example:

$("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>

Even seeing your jsFiddle, still not clear for me what you are looking for?! Be aware than using $(selector).attr('id') will return only the first matched element ID — A. Wolff
– A. Wolff, Commented Apr 23, 2014 at 12:47
Your setting and removing of attributes doesn't make much sense. What's the end game here? What are you trying to accomplish? — Ayman Safadi
– Ayman Safadi, Commented Apr 23, 2014 at 12:47
I just updated my answer to address your need to set the new attribute. — Ayman Safadi
– Ayman Safadi, Commented Apr 23, 2014 at 13:03

Ayman Safadi · Accepted Answer · 2014-04-23 13:03:12Z

2

I'm not sure what you're trying to accomplish, but I'm going to address your concerns:

Syntax Error
Wrap data-view in quotes.

20 test1 vs 10 test1 and 10 test2
When you do $('.testlist').attr('id'), it will only use the first result of the selector, test1. Try something like this instead:

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

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

Trying to dynamically set the attribute name
Try the object[property] = value syntax. Like this:

$("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/

edited Apr 23, 2014 at 13:03

answered Apr 23, 2014 at 12:53

Ayman Safadi

11.6k1 gold badge30 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Goran Stoyanov · Accepted Answer · 2019-12-29 11:47:05Z

use .data() instead:

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

Update:

  $("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))
  });

Working demo:

$("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>

This won't update attribute, only data object property. EDIT: here you are getting it, not setting it, not sure although i understand OP's issue

jgillich · Accepted Answer · 2014-04-23 12:44:49Z

0

Either:

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

Or:

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

answered Apr 23, 2014 at 12:44

jgillich

77.2k7 gold badges61 silver badges89 bronze badges

Comments

jgillich · Accepted Answer · 2014-04-23 12:49:30Z

0

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');
        });
    });
});

edited Apr 23, 2014 at 12:49

jgillich

77.2k7 gold badges61 silver badges89 bronze badges

answered Apr 23, 2014 at 12:49

K K

18.2k4 gold badges33 silver badges39 bronze badges

Comments

Oriol · Accepted Answer · 2014-04-23 12:49:37Z

0

Try this:

$('.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

answered Apr 23, 2014 at 12:49

Oriol

291k71 gold badges459 silver badges535 bronze badges

Comments

HRK · Accepted Answer · 2014-04-23 12:56:15Z

0

why you want to do this? if it is to give unique name, then better you search them from parent id,

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

or

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

answered Apr 23, 2014 at 12:56

HRK

3852 silver badges15 bronze badges

Comments

Goran Stoyanov · Accepted Answer · 2019-12-29 18:51:57Z

ON this case change this:

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

for this

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

This is the reason you're getting 20 test1 instead 10 test1 10 test2

Check the code snippet:

$("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>

Maybe will be a better way to obtain the parent div id, but this works with your code.

pankaj · Accepted Answer · 2022-01-05 08:27:53Z

0

you can do it by doing this way.

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

answered Jan 5, 2022 at 8:27

pankaj

1,97026 silver badges37 bronze badges

Collectives™ on Stack Overflow

Update custom data attribute name in jquery

8 Answers 8

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related