将属性添加到父元素

Question

我有一个JavaScript变量（例如：myElement），该变量包含一个类名为myClass的div，如下所示。

<div>
    <div class="myClass">
        <h1>My Div</h1>
        <div id="1">Div one Content</div>
        <h2>Headline two</h2>
        <div id="2">Div two Content </div>
    </div>
    <div class="myClass">
        <h1>My Div</h1>
        <div id="1">Div one Content</div>
        <h2>Headline two</h2>
        <div id="2">Div two Content </div>
    </div>
</div>

我想通过jascsript或jQuery向类为“ myClass”的div中添加一个属性（例如：data-index），使其看起来像这样：

<div>
    <div class="myClass" data-index="index1">
        <h1>My Div</h1>
        <div id="1">Div one Content</div>
        <h2>Headline two</h2>
        <div id="2">Div two Content </div>
    </div>

    <div class="myClass" data-index="index2">
        <h1>My Div</h1>
        <div id="1">Div one Content</div>
        <h2>Headline two</h2>
        <div id="2">Div two Content </div>
    </div>
</div>

你怎么能做到这一点？

请注意：我在名为myElement的JavaScript变量和以下代码中包含此div

myElement.attr('data-index','index')

不起作用。

更新：

我可以尝试像首先将存储在变量myElement中的div附加到DOM，然后添加属性：

$('div.myClass').attr('data-index','index');

但是问题出在DOM中，我的类myClass就像100的div。

Answer 1

尝试这个：

var newAttr = document.createAttribute("data-index");
newAttr.value = "[What you want the index to be]";

// Will set data-index for first .myClass in newElement
newElement.getElementsByClassName("myClass")[0].setAttributeNode(newAttr);

// Will set data-index for every .myClass in newElement
newElement.getElementsByClassName("myClass").map(function(node) {
    node.setAttributeNode(newAttr)
});

Answer 2

好吧，更好的方法是在创建HTML时创建属性。

但是您可以使用jquery迭代功能（Jquery.each）来做您想做的事情： http ://api.jquery.com/jquery.each/

var myElements = $('div.myClass'),
    i = 0;

$.each( myElements , function( i ) {
    $(this).attr('data-index','index'+(i+1));
});