如何在javascript中将相关的HTML元素绑定在一起?

时间:2014-05-20 09:21:22

标签: javascript jquery html django

我是HTML / Javascript的新手,如果问题非常简单,请原谅我。我正在尝试开发一个玩具HTML应用程序来维护待办事项列表。我并没有真正陷入困境,但我想听听下面问题的一些好的设计决定。

我有一个django服务器,它以下列形式为我提供了一系列元素:

<ul>
    <li  id="todo_1">Get groceries <a class="deletelink" href="/delete/1/">[X]</a></li>
    <li  id="todo_2">Water plants <a class="deletelink" href="/delete/2/">[X]</a></li>
    <li  id="todo_3">Repair bike <a class="deletelink" href="/delete/3/">[X]</a></li>
</ul>

我还有一些jQuery,只要其中一个&#34; [X]&#34;单击链接,这将删除父列表元素,如下所示:

$(".deletelink").on("click", function (event) {
    event.preventDefault();
    var parentItem = $(this).parent(); // the problem is here
    $.ajax({ 
    ... // ajax post request to server here
    }).success( function (status, data) {
        parentItem.delete();
    });
});

现在,问题是如果我稍微改变HTML的结构,例如做<div><a class="deletelink" href="/delete/1/">[X]</a></div>,我必须去改变javascript。所以,我想出了另一种方法。现在,每个元素也有自己的id,如:

    <li  id="todo_1">Get groceries <a class="deletelink" id="deletelink_1" href="/delete/1/">[X]</a></li>

点击后,javascript会变为

var parentItem = $("#todo_" + (/\D+_(\d+)/.exec(this.id)[1]));

因此,这会隐式地将每个deletelink_i绑定到todo_i列表项。然而,这看起来非常h​​acky(例如,现在如果我在另一个列表中有一个列表,我就不能轻易获得第一个列表中的所有项目)。我的问题是,有没有更好或更简单的方法在javascript中完成所有这些?如果可能的话,我真的希望将HTML呈现保留在服务器端。

3 个答案:

答案 0 :(得分:5)

您正试图删除最近的li祖先,以便您可以使用.closest()找到所需的祖先

var parentItem = $(this).closest('li');

答案 1 :(得分:1)

我说这是数据属性有用的一个很好的例子。

这使得结构尽可能灵活,你可以做到

<li  id="todo_1" data-item-id="1">
    Get groceries 
    <a class="deletelink" data-item-id="1" href="#">
        [X]
    </a>
</li>

这是jQuery Part

$(".deletelink").on("click", function (event) {
    event.preventDefault();
    var selectedItem = $(this).attr('data-item-id')
    $.ajax({ 
    ... // ajax post request to server here
    }).success( function (status, data) {
        $('[data-item-id="'+selectedItem+'"]').remove();
    });
});

答案 2 :(得分:0)

parent()接受选择器,因此您只需选择仅查看li个元素的父级:

var parentItem = $(this).parents('li');