Question

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

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

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

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

这是通过mark.js

完成的

为了将计数值放在与该div相关联的元素中，javascript函数能够对每个div中的跨度进行计数，会有什么建议吗？

Answer 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>

Answer 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，作为div span内id=abstract_12345的索引。

Answer 3

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

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

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

不计算动态生成的div中特定类的跨度

3 个答案: