Question

我的页面上有多个<p>。他们没有班级或ID。我想要实现的是能够针对这些<p>中的每一个计算目标中有多少个主题标签，并在<span>内显示结果。

结构示例：

<div class="parent">
    <p>
        #test #test #test
    </p>
    <span></span>
</div>

<div class="parent">
    <p>
        #test #test #test
    </p>
    <span></span>
</div>

<div class="parent">
    <p>
        #test #test #test
    </p>
    <span></span>
</div>

这是有效的，但它在计算所有内容：

$(function() {
    var text = $(this).find("pre").text();
    var hashTags = text.split("#").length;
        var result = hashTags - 1;

    $('#output').html('words count: ' + result);
});

Answer 1

您使用了错误的选择器，请将其替换为：

  var text = $(this).find("p").text();

另请注意，在您发布的代码中没有output div。检查此pen是否有效。

Answer 2

您可以尝试以下代码：

＆＃13;

//loop through every element with class parent
$(".parent").each( function(index) {
  //get number of tags per in <p>
  var tags = $(this).find("p").text().split("#").length - 1;
  //write the number of tags in <span>
  $(this).find("span").text(tags);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
    <p>
        #test #test #test
    </p>
    <span></span>
</div>

<div class="parent">
    <p>
        #test #test #test
    </p>
    <span></span>
</div>

<div class="parent">
    <p>
        #test #test #test
    </p>
    <span></span>
</div>

＆＃13;

计算多个div中的主题标签数量

2 个答案: