1

我有以下跨度元素：

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

使用下面的 js 函数，我可以得到 in between </span>and的长度</div>： 

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

    //If the length is less than 2
    if(len < 2){
        // i want to replace it with another words like "thanks."   

       }
 })

如果长度小于 8，那么我想用另一个单词或字符串替换它（例如，thanks.）IN BETWEEN</span>和</div>（参见单词“thanks”位置）。

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

我将如何用另一个字符串替换它？

编辑：

请注意，我正在使用.each，因为可能有多个具有相同类名的 span 元素。在第一行中，只有一个句点 ( </span>.</div>)，因此它满足条件并将被替换为另一个单词（在本例中为“thanks”）。

在第二行 ( </span>name</div>) 中，长度大于 2，因此不会被替换。

我希望这能澄清它。

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

...会变成...

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

2 回答 2

1 

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

    //If the length is less than 2
    if(len < 2){
        // DOM method:
        sphs.textContent = ' Thanks.';
        // jQuery method:
        $(this).parent().get(0).childNodes[2].textContent = ' Thanks.';
    }
 })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div class="text" contenteditable="true" id="example">
   <div class="outside">Type here <span class="inside"> please</span>.</div>
   <div class="outside">Type here <span class="inside"> please</span> ok?</div>
</div>

或者在这里试试 https://jsfiddle.net/8pa4akzh/3/

于 2016-12-13T20:23:59.593 回答
0

添加一个额外的（空）跨度并设置它。就像设置跨度的text()一样简单。

HTML：

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

JS：

   //If the length is less than 2
   if(len < 2){
        $('span#extra').text("thanks.");
   }
于 2016-12-13T20:17:57.227 回答