Question

我试图执行一个JQuery函数，该函数将在div id＆＃34; answerrr＆＃34;下为每个元素的空div（如果它为空）输出文本。但是脚本只会搜索第一个div并向其添加文本，而忽略其余部分。也许我错误地使用了.each（）函数？

<b><div id="answerrr"></div></b>

<b><div id="answerrr"><p>Not Empty</p></div></b>

<b><div id="answerrr"></div></b>
<script>
  $('#answerrr').each(function() {
    if ($('#answerrr').is(":empty")) {
      $('<p>Empty!</p>').appendTo($(this));
    }
  });
</script>

http://jsfiddle.net/wdTH2/3/

另外，如果我的页面要通过Ajax加载更多内容，我将如何确保重新执行此脚本

Answer 1

您的根本问题在于，HTML中多个元素具有相同ID并不合法。改为使用一个类。

修复此问题后，请勿在{{1}}调用中再次使用相同的选择器，只需使用.each来引用当前元素。

您还可以从循环中删除$(this)测试，并将其作为选择器的一部分，并且由于:empty将很乐意处理多个元素，您实际上可以摆脱.append 1}}循环，使你的整个代码就这样：

.each

请参阅http://jsfiddle.net/alnitak/L6B56/了解工作演示。

对于稍后添加的内容，只需确保上述代码作为AJAX加载的$('.answerrr:empty').append('<p>Empty!</p');回调的一部分进行调用。

Answer 2

首先id必须是唯一的。改为使用类：

<强> HTML

 <b><div class="answerrr"></div></b>
 <b><div class="answerrr">Not Empty</div></b>
 <b><div class="answerrr"></div></b>

<强> JS

$('.answerrr').each(function () {
    if ($(this).is(":empty")) {
        $('<p>Empty!</p>').appendTo($(this));
    }
});

fiddle

为每个元素执行JQuery函数

2 个答案: