Question

我已经找到了这个问题，但我无法看到它。此代码空间中的某处正在添加到每个列表项。我认为它在for循环中，因为它每次都会增加相同的空间量。

以下是代码：

    $(function(){
  $.get('/frameworks', appendToList);

  //POST request
  $('form').on('submit', function(event) {
    event.preventDefault();
    var form = $(this);
    var frameworkData = form.serialize();

    $.ajax({
      type: 'POST',
      url: '/frameworks',
      data: frameworkData
    }).done(function(frameworkName) {
      frameworkName = frameworkName[0].toUpperCase() + frameworkName.slice(1).toLowerCase();
      appendToList([frameworkName]);
      form.trigger('reset');
    });
  });

  //Del event

  function appendToList(frameworks) {
    var list = [];
    for(var i in frameworks) {
      framework = frameworks[i];
      content = '<a href="/frameworks/' +framework+'">' +framework+ '</a>' + '<a href="#" data-framework="' +framework+ '"><img src="del.png"></a>';
      list.push($('<li>', { html: content }));
    }
    $('.frameworks-list').append(list);
    console.log(list);
  }

});

我错过了什么？

以下是生成的HTML：

<ul class="frameworks-list">
  <li>
    <a href="/frameworks/React">React</a>
    <a href="#" data-framework="React"><img src="del.png"></a>
  </li>
  <li>
    <a href="/frameworks/Express">Express</a>
    <a href="#" data-framework="Express"><img src="del.png"></a>
  </li>
  <li>
    <a href="/frameworks/Angular">Angular</a>
    <a href="#" data-framework="Angular"><img src="del.png"></a>
  </li>
</ul>

所以看起来李正在关闭。我尝试添加这一行：

list.push($('<li>', { html: content }), '</li>'); //--------THIS LINE----------

但它没有用。

我记得当我拿出这样的图像时：

content = '<a href="/frameworks/' +framework+'">' +framework+ '</a>' + '<a href="#" data-framework="' +framework+ '"><span>X</span></a>';

我明白了：

因此图像存在问题。

Answer 1

这可能太明显了，但您是否尝试使用css更改填充和/或边距？

Answer 2

您错过了结束<li>Hi1 <li>Hi1 <li>Hi1。

某些浏览器（例如Google Chrome）会解释此代码：

<li>Hi1
 <li>Hi1
    <li>Hi1</li>
  </li>
</li>

如：

$(function(){
  $.get('/frameworks', appendToList);

  //POST request
  $('form').on('submit', function(event) {
    event.preventDefault();
    var form = $(this);
    var frameworkData = form.serialize();

    $.ajax({
      type: 'POST',
      url: '/frameworks',
      data: frameworkData
    }).done(function(frameworkName) {
      frameworkName = frameworkName[0].toUpperCase() + frameworkName.slice(1).toLowerCase();
      appendToList([frameworkName]);
      form.trigger('reset');
    });
  });

  //Del event

  function appendToList(frameworks) {
    var list = [];
    for(var i in frameworks) {
      framework = frameworks[i];
      content = '<a href="/frameworks/' +framework+'">' +framework+ '</a>' + '<a href="#" data-framework="' +framework+ '"><img src="del.png"></a>';
      list.push($('<li>', { html: content }), '</li>'); //--------THIS LINE----------
    }
    $('.frameworks-list').append(list);
    console.log(list);
  }

});

您需要将代码更改为：

height

Answer 3

您似乎没有关闭此处的<li：

list.push($('<li>', { html: content }));

Answer 4

@anivdwerf关于它是一个CSS问题是正确的，但我想给出一个深入的答案。由于某种原因将其浮动到左侧会导致它添加额外的间距。我还不确定为什么，但我只是在JavaScript代码中将图片添加到左侧：

  content = '<a href="#" data-framework="' +framework+ '"><img src="del.png"></a>' + '<a href="/frameworks/' +framework+'">' +framework+ '</a>';

这让我得到了理想的结果。

每个<li>的不需要的添加间距

4 个答案: