计算动态生成的 div 中特定类的跨度数答案

【问题标题】：count no of spans of specific class within a dynamically generated div计算动态生成的 div 中特定类的跨度数
【发布时间】：2017-02-28 09:07:31
【问题描述】：

假设我有许多动态生成并包含文本的 div。这些 div 中的每一个都有一个唯一的 id，它也是动态生成的，例如

<div id="abstract_12345"> ... text ...</div>

现在在这些 div 中，有一个特定类型的 span 是根据正则表达式动态生成的，例如当遇到“重要”这个词时，它被标记为

<span class="emphasis">significant</span>

这是通过mark.js完成的

对于 javascript 函数有什么建议，可以对每个 div 内的跨度进行计数，目的是将计数值放在与该 div 关联的元素中？

【问题讨论】：

@djsq：你建议了一个基于 css 的解决方案 - 你能再把它提出来吗
Yosvel Quintero 发布的内容我也会这样做。

标签： javascript jquery

【解决方案1】：

使用 jQuery 你可以做到：

$('div[id^="abstract_"]').each(function () {
  var $this = $(this),
      len = $this.find('span.emphasis').length;

  console.log($this.attr('id'), len);
});

div {margin: 0 0 15px 0;}
span.emphasis {color: red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="abstract_12345"><span class="emphasis">Lorem ipsum</span> dolor sit amet, consectetur adipisicing elit. <span>Sapiente ipsam animi</span>, alias harum aut est unde voluptates repudiandae vel molestias <span class="emphasis">significant</span>, officia! Illum dolore pariatur sequi magnam minus, aliquid voluptate officia, <span>quaerat</span> sint quam <span class="emphasis">commodi</span>.</div>

<div id="abstract_12346">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente ipsam animi, alias harum aut est unde voluptates repudiandae vel molestias, officia! Illum dolore pariatur sequi magnam minus, aliquid voluptate officia, <span>quaerat</span> sint <span class="emphasis">quam commodi</span>.</div>

【讨论】：

不，OP 说他有多个带有生成 id 的 div。
@dfsq 感谢您的评论。将答案更新为计数span.emphasis by divs 具有类似的动态生成ID

【解决方案2】：

如果你想使用纯 Javascript。

function myFunction() {
    var i;
    var x = document.querySelector("[id^=abstract_]").querySelectorAll("span");
    for (i = 0; i < x.length.i++){
        x[i].id = i;
    }
}

此代码会将id 添加到每个span 作为带有id=abstract_12345 的div 内的span 的索引。

【讨论】：

OP 说 div id 是动态生成的

【解决方案3】：

如果我正确理解您的愿望，这应该可以解决问题。

$('id*="abstract_"').each(function() {
  var amount = $(this).find('span.emphasis').length;

  $(this).prepend(amount);
});

【讨论】：