使用javascript处理内联块空间 [英] Handling inline-block spaces with javascript

问题描述

我们都知道inline-block元素之间的空白的老年龄问题。例如：

  .wrapper div {width：100px; height：30px; display：inline-block; border：1px solid＃333;}  

 < div class =wrapper> < div>< / div> < div>< / div> < div>< / div> < div>< / div>< / div>  

  .wrapper div {width：100px; height：30px; display：inline-block; border：1px solid＃333;}  

 < div class =wrapper> < div> < / div>< div> < / div>< div> < / div>< div> < / div>< / div>  

这是一个准备好的HTML JavaScript / jQuery，像添加脚本到第一个片段的行为像第二个？某些类型的 $（'。wrapper'）。minify（）; function。

有人建议使用如何使用CSS和Javascript缩小HTML？这个问题是关于通过编辑服务器端的文件来减少页面大小。这里我正在寻找一个解决方案，在内容传输后，缩小特定的元素，而无需编辑html文件。问题不是页面大小，而是元素中的空格。

解决方案

使用jQuery可以删除所有的文本节点 wrapper 的元素like

  $（'。wrapper'）。contents .filter（function（）{return this.nodeType == Node.TEXT_NODE;}）remove（）;  

  .wrapper div {width：100px; height：30px; display：inline-block; border：1px solid＃333;}  

 < script src =https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js>< / script>< div class =wrapper> < div>< / div> < div>< / div> < div>< / div> < div>< / div>< / div>  

We all know the ages old problem with white spaces between inline-block elements. For example:

.wrapper div {width:100px; height:30px; display:inline-block; border:1px solid #333;}

<div class="wrapper">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

The best solution in my opinion is to remove any spaces between the elements:

.wrapper div {width:100px; height:30px; display:inline-block; border:1px solid #333;}

<div class="wrapper">
    <div>
    </div><div>
    </div><div>
    </div><div>
    </div>
</div>

Can we do this on a ready HTML with javascript/jQuery, like adding a script to the first snippet to behave like the second one? Some sort of a $('.wrapper').minify(); function.

EDIT

Someone suggested a possible duplicate with How to minify HTML with CSS and Javascript?. That question is about reducing page size by editing files on server side. Here I'm looking for a solution that minifies a specific element after the content is transferred, without editing the html files. The problem is not page size, but white spaces in an element.

解决方案

Using jQuery you can remove all the textnodes which are children of the wrapper element like

$('.wrapper').contents().filter(function() {
  return this.nodeType == Node.TEXT_NODE;
}).remove();

.wrapper div {
  width: 100px;
  height: 30px;
  display: inline-block;
  border: 1px solid #333;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wrapper">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

这篇关于使用javascript处理内联块空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！