Question

我有多个具有相同类的字符串，并使用.each函数计算每个字符串的单词数量。当单词的数量等于2时，我想用break标签替换空格。下面有一个小提琴。

<a href="javascript:void(0);" class="navoption">The quick brown fox jumps over the lazy dog.</a><br /><br />
<a href="javascript:void(0);" class="navoption">Quick brown.</a><br /><br />
<a href="javascript:void(0);" class="navoption">The quick brown fox jumps.</a><br /><br />
<a href="javascript:void(0);" class="navoption">Lazy dog.</a><br /><br />
<button class="break">Wrap Two Words</button>

$(document).ready(function(){
    $('button.break').click(function(){
        $.each($('.navoption'), function() {
            var count = $(this).text().split(" ");
            var amount = count.length;
            if (amount == 2) {
                $(this).html($(this).html().replace(/ /g, "<br />"));
            } 
            else {
                return false;
            }
        });
    });
});

http://jsfiddle.net/ut60pyff/

预期结果：

快速的棕色狐狸跳过懒狗。

快速
棕色。

快速的棕色狐狸跳了起来。

懒惰
狗。

Answer 1

当您从循环内部返回false时，您将结束循环。如果$.each方法的回调返回false，则循环终止。

因此，您只需删除return false;即可使代码生效。

但是，您可以使用html方法轻松更改每个元素的内容。您将当前的HTML代码作为参数，并返回您想要的内容：

$('.navoption').html(function (i, h) {
  if (h.split(" ").length == 2) {
    h = h.replace(/ /g, "<br />");
  }
  return h;
});

演示：http://jsfiddle.net/ut60pyff/3/

Answer 2

更改为：

$(document).ready(function () {

    $(".break").click(function(){
        $(".navoption").each(function(){
        var count = $(this).text().split(" ");
            var amount = count.length;
            if (amount == 2) {
                $(this).html($(this).html().replace(/ /g, "<br />"));
            } 
        });

    });
});

http://jsfiddle.net/osmanrahimi/yhd48npv/

Answer 3

试试这个......

$('button.break').click(function() {
    $.each($('.navoption'), function() {
        var word_arr = $(this).text().split(" ");
        if (word_arr.length === 2) {
            $(this).html(word_arr.join("<br/>"));
        }
    });
});

如何计算具有相同类的多个字符串中的单词，如果单词的数量等于特定值，请使用break标记替换空格？

3 个答案: