Question

我正在做以下事情：

$('.document-content').on('input', function() {
  var headers;
  headers = $('.document-content > h2').each(function() {
    var headerId, headerText;
    headerId = $(this).attr('id');
    headerText = $(this).text();
    $('.document-outline').empty().append("<h2><a href='#" + headerId + "'>" + headerText + "</h2>");
  });
});

为了避免重复，我添加了empty()，但现在只将每个loop中的最后一项添加到.document-outline。

我该如何解决这个问题？

Answer 1

您需要在循环之前清空它，否则在添加任何项目之前删除之前的内容意味着删除所有先前的项目，因此只保留循环中的最后一项

$('.document-content').on('input', function () {
     var $ct = $('.document-outline').empty();
    var headers;
    headers = $('.document-content > h2').each(function () {
        var headerId, headerText;
        headerId = $(this).attr('id');
        headerText = $(this).text();
        $ct.append("<h2><a href='#" + headerId + "'>" + headerText + "</h2>");
    });
});

Answer 2

你需要empty()循环外的包含元素，否则每次迭代都会被清除。

$('.document-content').on('input', function() {
    var $headers = $('.document-content > h2'), 
        $outline = $('.document-outline').empty()

    $headers.each(function() {
        var headerId = $(this).attr('id'),
            headerText = $(this).text();
        $outline.append("<h2><a href='#" + headerId + "'>" + headerText + "</h2>");
    });
});

请注意，我通过在声明变量时设置值来略微缩短逻辑。

Answer 3

在外面循环中将其清空，否则你最后会附加最后一个元素，因为之前的所有内容都会被清空

$('.document-content').on('input', function() {
  var headers, 
  var outlineDoc = $('.document-outline').empty()
  headers = $('.document-content > h2').each(function() {
    var headerId, headerText;
    headerId = $(this).attr('id');
    headerText = $(this).text();
    $(outlineDoc).append("<h2><a href='#" + headerId + "'>" + headerText + "</h2>");
  });
});

empty（）。append（）在循环中追加最后一项

3 个答案: