如果不尊重，即使内在价值，它是假

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>