Question

这里我有html结构。它在页面上重复多次。

<article class="boo">
    <h4>Here goes the title</h4>
</arcticle>

我想计算文章内每个标题h4中的字符数。

$('article.boo h4').text().length > 70

计算所有标题中的字符总数。我想要的是检查每个标题是否超过70个字符。

在这种情况下循环遍历所有元素并进行验证的最佳方法是什么？

谢谢

Answer 1

您可以使用jQuery的each()方法，即：

$('article.boo h4').each(function() {
    if ($(this).text().length > 70) {
       //do stuff if longer than 70 chars
    }
});

或者，根据您对“最佳”的定义，您可以使用标准的JavaScript for循环：

for (var x = 0, y = $('article.boo h4').length - 1; x < y; x++) }
    if ($('article.boo h4')[x].text().length > 70) {
        //do stuff if longer than 70 chars
    }
}

如果你的最佳定义意味着'最简单'，那么第一种选择可能是要走的路，如果最好你的意思是'最高性能'使用第二种，尽管如果必要的话可以通过选择器缓存来改进，以免选择每个循环迭代的元素

Answer 2

如果你想使用简单的javascript试试

var h4s = document.getElementsByTagName("H4");
i = 0;
while (h4s[i]) {
//validate here
}

或者您可以使用jquery each

Answer 3

您可以使用jQuery each方法迭代jQuery对象的元素：

$("article.boo h4").each(function() {
    console.log($(this).text().length);
});

Answer 4

    $("article.boo h4").each(function (index, domEle) {
            if($(domEle).text().length>70)
{
                this.style.color = "blue";
            } else {
                this.style.color = "";
            }
        });

在多次输入的情况下使用jQuery计算字符数

4 个答案: