排序.pressRow类div后添加<hr/>元素异常：显示[Object object]或纯文本

嘿，我来帮你搞定这个问题～你遇到的[Object object]或者纯文本问题，主要是因为混淆了原生DOM方法和jQuery方法的使用，还有元素追加的逻辑有点小问题，咱们一步步来修正：

问题根源分析 #

你代码里的$(this)[0].append($('<hr />'))这里踩了个坑：

• $(this)[0]是把jQuery对象转换成了原生DOM元素
• 原生DOM的append()方法只能接受DOM元素、字符串或者DocumentFragment，但你传的是一个jQuery对象$('<hr />')，浏览器会把这个对象直接转换成字符串，就出现了[object Object]的错误显示
• 另外，直接修改OrderedDivs后用$("#PressRows").html(OrderedDivs)的方式，jQuery会把元素序列化为HTML字符串，也容易导致动态添加的内容异常

修正方案（推荐：在pressRow元素之间添加分隔线） #

如果你的需求是在每个排序后的pressRow之间添加分隔线（最后一个元素后面不加），可以用这个写法：

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 db - da;
  });

  // 先清空目标容器，再逐个追加元素和分隔线
  var $pressContainer = $("#PressRows").empty();
  OrderedDivs.each(function(index) {
    // 先追加当前的pressRow元素
    $pressContainer.append(this);
    // 只有不是最后一个元素时，才添加分隔线
    if (index !== OrderedDivs.length - 1) {
      $pressContainer.append('<hr />');
    }
  });
}

另一种情况：如果要在pressRow内部末尾添加分隔线 #

如果你的需求是把<hr/>放在每个pressRow元素的内部末尾，那只需要把原生DOM的append换成jQuery的append方法就行：

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 db - da;
  });

  // 用jQuery的append方法，直接传HTML字符串或者jQuery对象都可以
  OrderedDivs.each(function() {
    $(this).append('<hr />');
  });

  $("#PressRows").html(OrderedDivs);
}

关键注意点 #

1. 区分原生DOM和jQuery方法：原生DOM方法和jQuery同名方法的参数要求不同，尽量保持统一（要么全用原生，要么全用jQuery）
2. 元素追加的方式：直接清空容器后逐个追加，比一次性替换HTML更稳妥，避免序列化异常
3. 排序逻辑简化：日期对象可以直接相减得到毫秒差，返回差值就能实现正确的排序（降序用db - da，升序用da - db）

内容的提问来源于stack exchange，提问作者Diana G