在jQuery UI自动完成项目之后追加分隔线,但在最后一项之后

Question

我有一个jQuery UI自动完成绑定到输入元素和自动完成框中的项目的自定义显示.每个项目都有多行,我想清楚地将项目彼此分开,例如使用<hr />元素.以下工作但它也在<hr />最后一项之后呈现一个元素:

$(function () {
    $("#Customer").autocomplete({
        source: "/SomePath/SearchCustomers?term=ABC",
        select: function (event, ui) {
            $("#CustomerId").val(ui.item.customerId);
            return false;
        }
    })
    .data("autocomplete")._renderItem = function (ul, item) {
        var renderedItem = $("<li></li>")
            .data("item.autocomplete", item)
            .append("<a>" + item.customerId + ", " + item.name + "<br />"
                + item.addressLine1 + "<br />"
                + item.countryCode + ", " + item.city + "</a>");

        // if (IsNotTheLastItem(item))  <-- Is something like this possible?
            renderedItem = renderedItem.append("<hr />");

        renderedItem = renderedItem.appendTo(ul);

        return renderedItem;
    };
});

(代码源自此处的示例:http://jqueryui.com/demos/autocomplete/#custom-data(单击"查看源代码").)

是否可以确定我要渲染的项目是否是最后一项(如上面的注释行所示)？或者是否有一些替代方法可以在项目之间添加分隔符,但不是在最后一个项目之后？

Answer 1

由于你明显<hr>只是出于视觉目的而使用该元素,我认为你只能用CSS轻松解决这个问题:不是<hr>在每个<li>通过javascript 中生成一个元素,只需为每个<li>除了第一个之外的每一个都指定一个border-top .

ul li { border-top: 1px #ccc solid; padding: 2em 0; }
ul li:first-child { border-top: none; padding-top: 0; }

结果效果将是每个列表项下的一行除了最后一个,你将避免通过javascript注入标记 - 更重要的是 - 插入不必要的逻辑来检测你的最后一项