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我有100个div和类myClass。

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 iterate函数（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));
});

将属性添加到父元素

2 个答案: