javascript - Jquery 脚本以计数脚本中的所有 div 为目标，希望它为每个 div 单独工作

Question

我有一个 jquery 脚本，它可以计算字数并根据字数调整字体大小。问题是它计算父级中带有 h1 的所有属性。我希望它为每个 h1 单独计数。最初的脚本被标记为 h1:first。这是计算类 wofa 中所有 h1 的脚本:

$(function(){

var $quote = $(".wofa h1");

var $numWords = $quote.text().split(" ").length;

if (($numWords >= 1) && ($numWords < 3)) {
    $quote.css("font-size", "1px");
}
else if (($numWords >= 3) && ($numWords < 6)) {
    $quote.css("font-size", "5px");
}
else if (($numWords >= 20) && ($numWords < 30)) {
    $quote.css("font-size", "10x");
}
else if (($numWords >= 30) && ($numWords < 40)) {
    $quote.css("font-size", "15px");
}
else {
    $quote.css("font-size", "1px");
}    

});

Answer 1

已更新 工作示例 FIDDLE

您可以使用 .each() 函数

$('.wofa').each(function() {
    var quote = $(this).find('h1');
    var numWords = quote.text().split(" ").length;
    console.log(numWords);
    if ((numWords >= 1) && (numWords < 3)) {
        quote.css("font-size", "1px");
    } else if ((numWords >= 3) && (numWords < 6)) {
        quote.css("font-size", "5px");
    } else if ((numWords >= 20) && (numWords < 30)) {
        quote.css("font-size", "10x");
    } else if ((numWords >= 30) && (numWords < 40)) {
        quote.css("font-size", "15px");
    } else {
        quote.css("font-size", "1px");
    }
});