Update custom data attribute name in jquery

Issue

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>

Solution

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/

Answered By - Ayman Safadi