使用jQuery在空的<div>标签中插入具有内容的<span>标签

Question

原始的HTML：

<div class = "a">
  <div class="firstNumber">
     <span class="spanClass">4</span>
  </div>

  <div class="secondNumber"> </div>
</div>

<div class = "b">
     ..."firstNumber" div tag repeats here...
     ..."secondNumber" div tag repeats here too but might contain content...

</div>

我使用了下面的代码来检查"secondNumber" div标签是否为空。如果是，我想在"secondNumber" div标签内添加一个带有相同"spanClass"名称的标签包裹的"0"。但它没有起作用...

<script>
    jQuery(function ($) {
        if ($.trim($('.secondNumber').text()).length==0){
             $(".secondNumber").wrapInner("<span class="spanClass">0</span>"); 

        };
    });
</script>

- user1672793

---

你应该看一下这里的字符串："<span class="spanClass">0</span>"。那不是一个有效的字符串。尝试使用：'<span class="spanClass">0</span>'，并在Firefox下使用Firebug或在Chrome中使用开发者工具，以便它帮助您查看JavaScript中的可见错误。 - Guilherme David da Costa

Answer 1

试一下这个：

$('.secondNumber').each(function(i, el) {

   if($(this).find('.spanClass').length == 0) {

        $(this).html('<span class="spanClass">0</span>');

   }

});

编辑

$(function() {
    $('.secondNumber').each(function(i, el) {

       if($(this).find('.spanClass').length == 0) {

            $(this).html('<span class="spanClass">0</span>');

       }

    });
});

- andres descalzo

---

它在 JSFiddle 上运行正常，但在我的网站上却不行。问题肯定出在其他地方。谢谢帮忙。 - user1672793

Answer 2

为什么在知道内容为空的情况下要使用wrapInner？为什么不这样做：

$(".secondNumber").html('<span class="spanClass">0</span>');

编辑：

另外，看起来你的问题并不是wrapInner（虽然我仍然认为.html()更好），而是引号妨碍了你。看看我的例子。我在外面有单引号。你有两组双引号，如果你不转义内部的引号，它们将互相竞争。

- davidethell

---

是的，告诉 OP 查看控制台应该会显示语法错误，因为引号使用不当。 - Fabrício Matté

我已经尝试了你的代码以及@andres descalzo的代码（他在span标签周围使用了相反的引号，它在jsFiddle上可以工作，但在我的实际网站上无法工作。这让我相信问题出在其他地方。感谢你的努力。 - user1672793

看起来不像是在空的div标签上使用trim().length=0的结果，因为我使用了"!=0"，而且html()改变了其他span标签。但是我想不出除了0以外还有什么可能性了。你们认为我找到了问题的症结吗？ - user1672793

你尝试过用检查内容替换 .length=0 吗：$.trim($('.secondNumber').text()) = '' - davidethell

Answer 3

你的代码中有语法错误，应该使用单引号来表示 class 属性。

jQuery(function () {
    var $second = $('.secondNumber'); // caching the object
    if ( $.trim($second.text()).length == 0 ){
        $second.wrapInner("<span class='spanClass'>0</span>"); // or $second.append("...")
                              //  -----^
    };
});

http://jsfiddle.net/MKE4T/

- Ram

---

你的代码在 jsfiddle 上运行正常，但是我不知道为什么它在我的实际网站上无法工作。我相信问题出在其他地方。感谢你的努力。 - user1672793