javascript - 检查 html 元素的数量然后运行函数

Question

我有 Span 元素出现的三种不同场景。

1. 没有子范围元素:

   <div class="text" contenteditable="true" id="example">
    <div class="outside">Type here</div>
   </div>
   

2. 一个子跨度元素:

   <div class="text" contenteditable="true" id="example">
    <div class="outside">Type here <span class="inside"> please.</span></div>
   </div>
   

3. 具有相同类名的多个子 span 元素

   <div class="text" contenteditable="true" id="example">
    <div class="outside">Type here<span class="inside"> please </span> thanks</div>
    <div class="outside">Name <span class="inside"> please.</span> thanks.</div>
   </div>
   

我想运行以下函数:

var len = $('span.inside').get(0).nextSibling.length;
console.log(len);

因为 span 类可以出现一次或多次，或者根本不出现，所以我想检查 span 是否存在。然后根据 span 元素存在的次数，我需要为所有 span 元素运行该函数。

我如何实现这一目标？

Answer 1

var length = $('span.inside').length;

if (length > 0) {

  $('span.inside').each(function() {
    var len = $(this).get(0).nextSibling.length;
    console.log(len);
  })


}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="text" contenteditable="true" id="example">
  <div class="outside">Type here<span class="inside"> please </span> thanks</div>
  <div class="outside">Name <span class="inside"> please.</span> thanks.</div>
</div>

1. 使用类并获取长度。
2. 对于许多跨度，请使用 .each() 进行迭代