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

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();
    }
};

我还尝试使用“”、\s、“\s”、\n 和“\n”作为删除和查找函数的参数。没有任何效果。那么，我的问题是，为什么它们都不起作用，有什么会起作用的吗？

编辑：

这是一个小提琴：http://jsfiddle.net/uoojsLu0/ 这使用定义大小的块而不是简单的文本。有五个<li>s，每个20px宽，在一个100px宽的<ul>内。如果这行得通，它们应该并排并排，之间没有间隙（有效地混合在一起），并且完美地适合该 100 像素，因此在一条线上。然而，它们之间存在空间，并且该空间将最后一个<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

该代码对我有用。

输入之间存在空格时的显着效果：

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

答案（期望的效果）：

$('body').cleanWhitespace();

<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" />

Answer 2

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

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