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")
)

正如您所看到的，每个data-attribute设置li为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-tag数字。我已经尝试在onChange函数中执行此操作，但它没有按预期工作。我已经制作了这个JSFiddle https://jsfiddle.net/59cus1cL/1/（转换为使用jQuery版本的KendoUI用于此演示的目的）。

感谢任何帮助

由于

Answer 1

嵌套项目不是li元素（this）的直接子项，因此children将无法找到它们。

而是使用find：

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

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

1 个答案: