CODEWITHSUNDEEP
javascriptjqueryhtmlattrcustom-data-attribute
ak85
ak85

Reputation: 4264

Update custom data attribute name in jquery

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>

Upvotes: 4

Views: 1411

Answers (8)

pankaj
pankaj

Reputation: 1914

you can do it by doing this way.

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

Upvotes: 0

Fiambre
Fiambre

Reputation: 1979

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.

Upvotes: 0

Milind Anantwar
Milind Anantwar

Reputation: 82251

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>

Upvotes: 1

Ayman Safadi
Ayman Safadi

Reputation: 11552

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/

Upvotes: 2

HRK
HRK

Reputation: 385

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']")

Upvotes: 0

Oriol
Oriol

Reputation: 288710

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

Upvotes: 0

K K
K K

Reputation: 18109

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

Upvotes: 0

jgillich
jgillich

Reputation: 76369

Either:

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

Or:

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

Upvotes: 0

Related Questions