jquery：计算数据属性中的单词数

Question

我有一些数据属性包含一些标签的元素。

我需要计算每个元素标签的数量。

像这样：

<div data-tags="foo bar something else">
    some text
</div>
<div data-tags="foo bar">
    some text
</div>
<div data-tags="foo">
    some text
</div>
<div data-tags="">
    some text
</div>

我想做这样的事情：

$('div[data-tags]').each(function(){
    var tags = $(this).data('tags'),
        count = tags.split(' ').length;
    $(this).css({marginLeft: (20 * count)});
});

但是这样，对于具有data-tags =“”和data-tags =“foo”的两个元素，count将为1，因为split的结果将是这样的：

"".split(' '); //[""]
"foo".split(' '); //["foo"]

并且这两者的长度都是1.

我能想到的唯一方法是添加一个条件并在分割结果不是[“”]时执行这些操作。但它看起来不是一个好主意。或者至少不是最好的。

我想知道是否有人有更好的主意。感谢。

Answer 1

您可以使用regexp match代替简单分割：

$('div[data-tags]').css('marginLeft', function() {
    var tags = $(this).data('tags');
    return (tags.match(/\w+/g) || []).length * 20;
});

演示：http://jsfiddle.net/dqfx0wun/2/

Answer 2

一种方法是使用Array.prototype.filter()和String.prototype.trim()来删除空的仅限空格的数组元素：

$('div[data-tags]').each(function() {
  var tags = $(this).data('tags'),
    count = tags.split(' ').filter(function (word) {
      return word.trim().length;
      }).length;
  $(this).css({
    marginLeft: (20 * count)
  });
});

div[data] {
  border: 1px solid #000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-tags="foo bar something else">
  some text
</div>
<div data-tags="foo bar">
  some text
</div>
<div data-tags="foo">
  some text
</div>
<div data-tags="">
  some text
</div>

或者，或者，测试length变量的tags;零是一个假值：

$('div[data-tags]').each(function() {
  var tags = $(this).data('tags'),
    count = tags.split(' ').length;
  $(this).css({
    marginLeft: tags.length  ? (20 * count) : 0
  });
});

div[data] {
  border: 1px solid #000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-tags="foo bar something else">
  some text
</div>
<div data-tags="foo bar">
  some text
</div>
<div data-tags="foo">
  some text
</div>
<div data-tags="">
  some text
</div>

参考文献：

• Array.prototype.filter()。
• String.prototype.trim()。