Question

当我在此代码段的末尾阅读.html()时，我得到了以下结果：

"



<div style="left: 0px;" class="text">Test1</div><div style="left: 1px;" class="text">Test2</div><div style="left: 2px;" class="text">Test3</div>"

为什么所有这些空行？

注意：在JS部分中，我分离所有.text元素，对它们应用一些修改，并将它们重新添加到DOM中。我需要在我的真实代码中执行此操作，原因可能与此主题无关。

$("#blah").append($(".text").detach().each(function(i) {
   this.style.left = Math.random() * 10 + 'px'; this.style.top = i*10 + 'px'; 
}));
console.log($("#blah").html());

.text {position:absolute;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<body>  
<div id="blah">
  <div class="text" >Test1</div>
  <div class="text" >Test2</div>
  <div class="text" >Test3</div>
</div>

Answer 1

您不需要分离并附加元素来更改其样式。您基本上是在顶部的元素之间累积所有空格，并移动空白下面的所有元素。

如果您的HTML看起来像这样，那么问题就不可见了：

<div id="blah"><div class="text" >Test1</div><div class="text" >Test2</div> <div class="text" >Test3</div></div>

JSFiddle：http://jsfiddle.net/TrueBlueAussie/not1yerc/

基本上不要分离和追加。这些更改发生在同一个JS浏览器周期中，因此不会出现故障：

$(".text").each(function(i) { this.style.left = Math.random() * 10 + 'px'; this.style.top = i*10 + 'px'; }); console.log($("#blah").html());

真正的问题：

由于真正的问题是使用分离和附加以避免transition-delay样式被触发，真正的解决方案是从元素中删除特定的过渡类，更改它们，然后再添加该类。

e.g。有一个新的transitions类，其中包含过渡样式：

.transitions{ transition-duration: 0.2s; }

确保所有text元素都符合要求。然后你的代码变成：

$(".text").each(function(i) { // Remove the transitions styling class $(this).removeClass('transitions'); // Change the layout without transitions this.style.left = Math.random() * 10 + 'px'; this.style.top = i*10 + 'px'; // Restore the transitions styling class $(this).addClass('transitions'); });

这比分离和附加DOM元素快得多，并且不会移动空格。

Answer 2

为什么所有这些空行？

因为在移动节点之前它们位于您的初始DOM中。如果您查看#blah的html源代码，您会发现四个换行符 - 它们在DOM中表示为空白文本节点。由于您没有删除它们，它们仍然驻留在DOM中 - 只有它们之间不再有<div>个，使行为空。

Answer 3

由于标记中有空格，因此您有空行。此外，正如其他人在评论中所提到的，您不需要detach。如果您不想更改标记，请执行.trim()。

示例代码段：

＆＃13;

$("#blah").find(".text").each(function(i) {
   this.style.left = Math.random() * 10 + 'px'; this.style.top = i*10 + 'px'; 
   $(this).appendTo($("#blah"));
});
console.log($("#blah").html().trim());

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="blah">
  <div class="text" >Test1</div>
  <div class="text" >Test2</div>
  <div class="text" >Test3</div>
</div>

＆＃13;

或者，在这种情况下，只需从标记中删除whitepsace。正如@trueblueassie所提到的，对于大块的HTML字符串，.trim()可能会很慢。而且，你甚至不需要.append()来移动东西。

<div id="blah"><div class="text" >Test1</div><div class="text" >Test2</div><div class="text" >Test3</div></div>

DOM中有很多空行

3 个答案: