Question

我有三种不同的场景，其中span元素呈现。

没有子跨度元素：

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

一个子跨度元素：

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

具有相同类名的多个子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

我想检查是否存在跨度。

您可以通过检查选择器的length属性来实现此目的：

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

根据span元素的次数，我需要为所有span元素运行函数

这是一个简单的if语句，然后您可以使用each()循环选择器中的元素：

if (numberOfSpans > 5) { // 5 just an example
    $spans.each(function() {
        // do something with the span here...
    });
}

Answer 2

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>

使用课程并获取长度。
对于许多跨度使用.each()来迭代

检查html元素的数量，然后运行一个函数

2 个答案: