Question

我在排序与<div>类对应的.pressRow后尝试添加水平条。这是我的JavaScript函数：

function SortPressRecent() {
    var $pressRows = $(".pressRow");
    var OrderedDivs = $pressRows.sort(function (a, b) {
        var da = new Date($(a).data("date"));
        var db = new Date($(b).data("date"));
        return da > db ? -1 : da < db;
    });
    $.each(OrderedDivs, function () {
        $(this)[0].append($('<hr />'));
    });
    $("#PressRows").html(OrderedDivs);
}

这就是PressRow的样子：

<div id="PressRows">
    <div class="row pressRow" data-date="1/13/2010 8:36:00 PM" data-name="AStringHere">
        <div class="col-sm-3">
            <img src="anImgHere" />
        </div>
        <div class="col-sm-9">
            <a class="links" href="someLink">AStringHere</a>
        </div>
    </div>
    ... More pressRows here ...
</div>

如果我追加$('<hr />')，则会显示为[Object object]。如果我将其添加为'hr'，则会显示为文本，而不是我想要的行。

编辑：你的答案都是正确的。我已经意识到我有一个不同的问题，我需要在每个</div>的结束pressRow元素之后添加它。我最终没有使用$.each函数：

    function SortPressRecent() {
        var $pressRows = $(".pressRow");
        var OrderedDivs = $pressRows.sort(function (a, b) {
            var da = new Date($(a).data("date"));
            var db = new Date($(b).data("date"));
            return da > db ? -1 : da < db;
        });

        $("#PressRows").html(OrderedDivs);
        $(".pressRow").after('<hr/>');
    }

Answer 1

你正在混淆vanilla JS和jQuery。

您的代码是：

$(this)[0].append($('<hr />'));

应该是

$(this).append($('<hr />'));

Answer 2

append()方法是一个jQuery方法，需要一个像$(this)这样的jQuery对象。当您尝试使用$(this)[0]访问第一个项目时，会返回一个JavaScript对象，而不是jQuery，因此它没有append()方法。

此外，您可以将HTML字符串传递给append()方法，因此您只需将其传递给'<hr />'，而无需将其设为jQuery对象$('<hr />')。

更改此行：

$(this)[0].append($('<hr />'));

为：

$(this).append('<hr />');

注意：某些浏览器在JavaScript节点上添加了对append()方法的支持，但并非所有浏览器都支持它，因此不建议使用它。如果你想尝试它，那么你必须传递一个JavaScript节点，而不是jQuery对象。将上面的行更改为：

$(this)[0].append($('<hr />')[0]);

将<hr />元素添加到类中的每个元素，获取[Object object]或纯文本而不是hr元素

2 个答案: