Question

我有以下代码：

<div class="A1">
    <div class="child">A1-1</div>
    <div class="child">A1-2</div>
    <div class="child">A1-3</div>
    <div class="child">A1-4</div>
    <div class="A2">
        <div class="child">A2-1</div>
        <div class="child">A2-2</div>

        <div class="A3">
            <div class="child">A3-1</div>
            <div class="child">A3-2</div>
        </div>
    </div>
</div>

我想知道如何根据订单为class .A1的每个孩子分配一个值。因此，如果A1-1是代码中的第一个，它将被分配：1 如果我重新订购它：

<div class="child">A1-3</div>
<div class="child">A1-2</div>
<div class="child">A1-1</div>
<div class="child">A1-4</div>

然后现在A1-1的值为3。有什么想法吗？

Answer 1

$('.A1').children().each(function (index,element) {
    $(element).html('A1-' + (index + 1));
});

Answer 2

http://jsfiddle.net/justiceerolin/wH4UG/

因此它适用于所有A-N实例。

Answer 3

正如我在评论中提到的，div元素没有value属性，因此以下内容创建了一个data-value属性，第一个子节点设置为1，第二个子节点设置为2等等：

$(".A1").children().each(function(index) {
    $(this).attr("data-value", index + 1);
});

即使您在DOM中移动它们，该属性也将保留在每个元素中。

如果要将值提交到数据库，那么您可能希望将索引“1”与其div“A1-1”（或上一个示例中的“A1-3”）的内容相关联。如果是这样，你可以这样做：

var values = {};
$(".A1").children().each(function(index) {
    values[index + 1] = $(this).html();
});
$.post("yourURLtoSubmitDataTo", values);

values对象的最终结果如下：

{
   "1" : "A1-3",
   "2" : "A1-2",
   "3" : "A1-1",
   "4" : "A1-4"
}

jQuery查找子项并按顺序分配值

3 个答案: