jQuery查找子项并按顺序赋值

jQuery find children and assign value by order

本文关键字：顺序 赋值 查找 jQuery      更新时间：2023-09-26

我有以下代码：

<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。有什么想法吗？

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

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

这样它就适用于A-N的所有实例。

正如我在评论中提到的，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"
}
相关文章：