Question

当换行符被读作空格字符时，有十几种解决方法可以在内联块元素之后删除空格，例如注释技巧和省略结束标记，或者根本不使用换行符。但是，我现在希望完成的是一个更优雅的解决方案，不需要摆弄HTML。相反，我想使用Javascript或Jquery函数自动删除这个空格。 This question选择的答案似乎有解决方案，但该代码不起作用。那段代码在这里：

jQuery.fn.cleanWhitespace = function() {
    textNodes = this.contents().filter(
        function() { return (this.nodeType == 3 && !/\S/.test(this.nodeValue)); })
        .remove();
    return this;
}

这些是我尝试的其他一些潜在解决方案：

$.fn.removeSpace = function(){
    $(this).contents().filter(function() {
        return this.nodeType === 3;
    }).remove();
};

$.fn.removeSpace = function() {
    if (this.nodeType === 3) {
        $(this).contents().find().remove();
    }
};

我也尝试过使用＆＃34;＆＃34;，\ s，＆＃34; \ s＆＃34;，\ n和＆＃34; \ n＆＃34;作为remove和find函数的参数。没有任何效果。那么，我的问题是，为什么它们都不起作用，有什么将工作？

编辑：

这是一个小提琴：http://jsfiddle.net/uoojsLu0/ 这使用了定义大小的块而不是简单的文本。在100px宽<li>内有五个<ul>个，每个宽20个像素。如果这是有效的，它们应该是并排的，没有间隙（有效地混合在一起）并且完全适合100px，因此在一条线上。然而，它们之间存在空间，并且该空间推动了最后<li>。请注意，margin和padding都是0.那么，为什么这段代码没有删除空格呢？

编辑2：

好的，我找到了出现差异的确切原因。该代码适用于调用该函数的元素的所有子元素，但不适用于任何这些子元素的子元素。由于这是一个效果，我希望适用于整个页面，它不能解决我的问题。有没有办法让这段代码影响元素孩子的孩子，以及那些孩子的孩子，一直下来？

编辑3：

对于之后有这类问题的人来说，似乎没有任何解决方案。但是，有一些解决方法。使用上面的第一个函数，您可以执行以下操作：

$('#container').cleanWhitespace();
$('#container').children().cleanWhitespace();
$('#container').children().children().cleanWhitespace();
$('#container').children().children().children().cleanWhitespace();
$('#container').children().children().children().children().cleanWhitespace();
$('#container').children().children().children().children().children().cleanWhitespace();

依此类推，直到你进入网站上任何地方使用的最大深度。当然，这既不美观也不高效，所以评论技巧或类似的东西可能是更好的选择。

Answer 1

该代码适用于我。

注意输入之间存在空格时的效果：

＆＃13;

<input type="text" />
<input type="text" />

＆＃13;

答案（期望效果）：

＆＃13;

$('body').cleanWhitespace();

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
  jQuery.fn.cleanWhitespace = function() {
    textNodes = this.contents().filter(
        function() { return (this.nodeType == 3 && !/\S/.test(this.nodeValue)); })
        .remove();
    return this;
}
  </script>


<input type="text" />
<input type="text" />

＆＃13;

Answer 2

您可以在子元素上运行.each：

$('body').children().each(function () {
    console.log(this.value); // "this" is the current element in the loop
    $(this).cleanWhitespace();
});

使用Javascript和/或Jquery删除内联块空格？

编辑：

编辑2：

编辑3：

2 个答案: