Question

构建一个简单的待办事项列表（因为我们需要另外一个）。使用jQuery.before（）在最后的空白 li 之前插入一个新项目。 jQuery如下：

$('#blankLine').before('<li class="item">' +
    '<div class="todo-item">' +
        '<input type="checkbox">' +
        '<p contenteditable="true">' +
            '<span>a</span>' +
            'Walk the cat' +
            '<span>a</span>' +
        '</p>' 
    '</div>' +
    '<div class="mover">' +
        '<i class="fa fa-bars" aria-hidden="true"></i>' +
    '</div>' +
'</li>');

HTML：

<li class="item">
    <div class="todo-item">
        <input type="checkbox">
        <p contenteditable="true">
            <span>a</span>
            Walk the cat
            <span>a</span>
        </p>
    </div>
    <div class="mover">
        <i class="fa fa-bars" aria-hidden="true"></i>
    </div>
</li>
<li id="blankLine"></li>

相关的SCSS：

li {
    border-bottom: 1px solid #29AADD;
    height: 1.75em;
    padding-bottom: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .todo-item {
        width: 50%;
    }

    input {
        margin: 1px 4px 2px 10px;
    }
    p {
        margin: 0;
        margin-left: 12px;
        display: inline;
        height: 1em;
        padding-right: 2px;
        padding-left: 2px;
        width: 100%;

        //Bug in Firefox would insert a pair of <br> tags on the inside of 
        //<p contenteditable="true"> *** </p> just before the closing p tag
        br {
            display: none;
        }
    }
    span {
        padding: 0;
        margin: 0;
        color: #FDFD77;
    }
    .mover {
        margin-right: 3%;
        cursor: pointer;
    }
    i {
        padding: 0;
        margin: 0 !important;
    }
    &.new-item p{
        color: lighten($primary-text, 20%);
    }

    input[type=checkbox]:checked ~ p {
        text-decoration: line-through;
        color: lighten($primary-text, 10%);
    }
}

jQuery添加了新元素，但 p 标记的宽度更小，并且更接近复选框。我已经挖掘了开发人员工具，并且计算出的CSS对于硬编码的 li 项目是相同的，并且所有它的后代都是插入的 li 项目而且它是＆＃39 ; s后代。

为什么这样做，我该怎么做才能修复它？（指向codepen的链接：http://codepen.io/SethHerning/pen/851735ca813ac08a73f8c86d322421d3）

Answer 1

由于你的标记中有whitespaces。

<强>解决方案：

这里最简单的方法是在元素之间使用来删除标记中的空格。

//Here starts the real fun!
/* Things to consider
	1) Entering new item (turn into regular and add new "Add")
	2) Moving items (will need 3rd party plugin)
	3) Saving items to local storage (what actions trigger save)
	4) Loading from local storage
*/

$(document).ready(function() {

  //Adding new item
  $('#addItem').click(function() {
    // alert("Pressed");
    // $('.new-item input p').val("");
    // $('.new-item input').removeAttr("disabled");
    $('#blankLine').before('<li class="item">' +
      '<div class="todo-item">' +
      '<input type="checkbox">' +
      '<p contenteditable="true">' +
      '<span>a</span>' +
      'Walk the cat' +
      '<span>a</span>' +
      '</p>' +
      '</div>' +
      '<div class="mover">' +
      '<i class="fa fa-bars" aria-hidden="true"></i>' +
      '</div>' +
      '</li>');
    // $('.new-item').prev().removeClass('new-item');
    return false;
  });
});

* {
  margin: 0;
  padding: 0;
}
body {
  background: #844E20;
  color: #000;
}
.notepad {
  width: 50vw;
  min-width: 300px;
  max-width: 600px;
  height: 90vh;
  margin: 5vh auto;
  padding: 0;
  background: #FDFD77;
  /* offset-x | offset-y | blur-radius | spread-radius | color */
  box-shadow: 0px 10px 10px 5px #222;
  position: relative;
}
.notepad #addItem {
  position: absolute;
  bottom: 0;
  right: 5px;
  font-size: 2em;
  cursor: pointer;
}
header {
  background: white;
  height: 7.5vh;
  border-bottom: 1px solid black;
}
header h3 {
  width: 75%;
  /* % of header, not vw of screen */
  margin: auto;
  padding: 1.5vh;
  text-align: center;
  font-size: 2em;
}
section {
  margin-top: 2vh;
}
section ul {
  width: 100%;
}
section li {
  border-bottom: 1px solid #29AADD;
  height: 1.75em;
  padding-bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
section li .todo-item {
  width: 50%;
}
section li input {
  margin: 1px 4px 2px 10px;
}
section li p {
  margin: 0;
  margin-left: 2px;
  display: inline;
  height: 1em;
  padding-right: 2px;
  padding-left: 2px;
  width: 100% !important;
}
section li p br {
  display: none;
}
section li span {
  padding: 0;
  margin: 0;
  color: #FDFD77;
  display: inline-block;
}
section li .mover {
  margin-right: 3%;
  cursor: pointer;
}
section li i {
  padding: 0;
  margin: 0 !important;
}
section li.new-item p {
  color: #333333;
}
section li input[type=checkbox]:checked ~ p {
  text-decoration: line-through;
  color: #1a1a1a;
}
@media (max-height: 650px) {
  header h3 {
    font-size: 1.5em;
  }
}
@media (max-height: 400px) {
  header h3 {
    font-size: 1em;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="notepad">
  <header>
    <h3>My checklist</h3>
  </header>
  <section>
    <ul class="checklist">
      <li></li>
      <li class="item">
        <div class="todo-item">
          <input type="checkbox"><!--
          --><p contenteditable="true"><!--
            --><span>a</span><!--
            -->Walk the cat
            <span>a</span>
          </p>
        </div>
        <div class="mover">
          <i class="fa fa-bars" aria-hidden="true"></i>
        </div>
      </li>
      <li class="item">
        <div class="todo-item">
          <input type="checkbox"><!--
          --><p contenteditable="true"><!--
            --><span>a</span><!--
            -->Walk the cat
            <span>a</span>
          </p>
        </div>
        <div class="mover">
          <i class="fa fa-bars" aria-hidden="true"></i>
        </div>
      </li>
      <li id="blankLine"></li>
  </section>
  <div id="addItem">+</div>
</div>

jQuery element.before（）插入格式不正确的元素

1 个答案: