如果不尊重，即使內在價值，它是假

Question

這是我的HTML代碼：

$(function() { 
 
    function reverse(s) { 
 
    return s.split("").reverse().join(""); 
 
    } 
 

 
    $('button').click(function() { 
 
    var span = $(this).siblings('span'); 
 
    span.text(function() { 
 
     var reversed = reverse($(this).text()); 
 
     return reversed; 
 
    }); 
 

 
    if (!span.children('small').length) { 
 
     span.wrapInner('<small></small>'); 
 
     console.log(!span.children('small').length); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<span>reverse1</span> 
 
<span>reverse2</span> 
 
<button>reverse me</button>

我把的console.log進入if語句添加一個小唯一旦在DOM中（不確定wrapInner函數），檢查小節點是否只添加一次。我在邏輯表達式中檢查了值，在沒有小標記的情況下爲真，在添加時爲false。任何人都可以幫助我理解？

Answer 1

我已經更新了我的代碼到你的跨度內創建一個小的，如果不存在，並且跨度內的小文本內容放置。它只創建小的第一通。隨後的所有通道只需將小空置空並重新填充即可。我真的不需要清空IF語句中的小部分，只是證明你可以用它來處理它。

$(function() { 
 
    function reverse(s) { 
 
    return s.split("").reverse().join(""); 
 
    } 
 
    // When the button el is clicked, reverse 
 
    $('button').click(function() { 
 
    var span = $(this).siblings('span'); 
 

 
    span.each(function() { 
 
     // Store the text string, regardless of DOM 
 
     var textStr = $(this).text(); 
 

 
     if (!$(this).children("small").length) { 
 
     // I don't have a nested small. Make one! 
 
     // Note that, in making one, I wipe out any 
 
     // content in this span element. 
 
     console.log("No small!"); 
 
     $(this).html("<small></small"); 
 
     } else { 
 
     // I have a small. Don't wipe the entire contents 
 
     // of this span, simply empty the small. 
 
     console.log("Has small!"); 
 
     $(this).children("small").empty(); 
 
     }; 
 
     
 
     // Either way, I now have a span with an empty small. 
 
     // Stick my text in there! 
 
     $(this).children("small").text(reverse(textStr)); 
 
    }); 
 

 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <span>reverse1</span> 
 
    <span>reverse2</span> 
 
    <button>reverse me</button> 
 
</div>