javascript - 如何使用 Javascript 更改循环中子元素的数据属性？

Question

我有一个使用 KendoUI for MVC 创建的可排序列表。该列表工作正常，我一直在对数据属性进行重新排序，以便当您重新排序列表时，属性名称仍然按顺序运行。

<ul id="plot__points">
    <li class="sortable disabled" data-tag="plot0">
        <label>Location START</label>                
        <div class="plotrow lat" data-lat="lat_plot0">
            <input class="k-textbox" value="003" />
        </div>
        <div class="plotrow lon" data-lon="lon_plot0">
            <input class="k-textbox" value="004" />
        </div>
    </li>
    <li class="sortable" data-tag="plot1">
        <label>Location #1</label>
        <div class="plotrow lat" data-lat="lat_plot1">
            <input class="k-textbox" value="001" />
        </div>
        <div class="plotrow lon" data-lon="lon_plot1">
            <input class="k-textbox" value="002" />
        </div>
    </li>
    <li class="sortable" data-tag="plot2">
        <label>Location #2</label>
        <div class="plotrow lat" data-lat="lat_plot2">
            <input class="k-textbox" value="003" />
        </div>
        <div class="plotrow lon" data-lon="lon_plot2">
            <input class="k-textbox" value="004" />
        </div>
    </li>
    <li class="sortable" data-tag="plot3">
        <label>Location #3</label>
        <div class="plotrow">
            <div class="plotrow lat" data-lat="lat_plot3">
                <input class="k-textbox" value="005" />
               </div>
            <div class="plotrow lon" data-lon="lon_plot3">
                <input class="k-textbox" value="007" />
            </div>
        </div>
    </li>
</ul>

上述 HTML 后面的代码的 kendoUI 部分是:

@(Html.Kendo().Sortable()
    .For("#plot__points")
    .Cursor("url('" + Url.Content("~/content/web/sortable/grabbing.cur") + "'), default")
    .CursorOffset(offset => offset.Left(-230).Top(-10))
    .HintHandler("hint")
    .Disabled(".disabled")
    .Events(e => e.Change("onChange"))
    .PlaceholderHandler("placeholder")
)

如您所见，每个 li 上都有一个 data-attribute 设置为 data-tag。当您对列表重新排序时，data-tag 会更新，以便它们按顺序运行。这是通过在 Change 的事件处理程序上运行的以下 JavaScript 实现的。

function onChange(e) { 
    console.clear();        

    $("#plot__points > li").each(function(index, item) {
    $(this).attr("data-tag", "plot" + (index + 1));
    $(this).children('div[data-lat]').attr('data-lat', "lat_plot" + (index + 1));
    $(this).children('div[data-lon]').attr('data-lon', "lon_plot" + (index + 1));
  });
} 

所有这些工作正常，但我还想更新每个 li 中的子元素 data-lat 和 data-lon 以匹配它们新排序的 data-标签号。我尝试在 onChange 函数中执行此操作，但它没有按预期工作。我制作了这个JSFiddle https://jsfiddle.net/59cus1cL/1/ (出于本演示的目的，转换为使用 KendoUI 的 jQuery 版本)。

感谢任何帮助

谢谢

Answer 1

嵌套项不是 li 元素 (this) 的直接子元素，因此 children 将找不到它们。

而是使用查找:

$(this).find('div[data-lat]').attr('data-lat', "lat_plot" + (index + 1));