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>

</span>次の js 関数を使用して、との間の長さを取得できます</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>and </div>(単語「thanks」の配置を参照) に置き換えたいと考えています。

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

どうすれば別の文字列に置き換えることができますか?

編集：

.each同じクラス名を持つ複数のスパン要素が存在する可能性があるため、使用していることに注意してください。1 行目はピリオド ( ) しかないため</span>.</div>、条件を満たし、別の単語 (この場合は「thanks」) に置き換えられます。

2 行目 ( </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 に答える