时间戳

首页 > 解决方案 > 如何知道每个函数中特定 div id 的 div 内容是否为空？

jquery - 如何知道每个函数中特定 div id 的 div 内容是否为空？

问题描述

我需要检查每个函数中特定的 div id 内容是否为空。如果 div 内容是空的，我想放一条“请点击此处添加图片”的短信。但是我的代码没有用。

我有一个这样的html：

<div class="wrapper">
<div class="list">
<div class="item"><div id="image">image</div></div>
<div class="item"><div id="test">test</div></div>
<div class="item"><div id="image"></div></div>
<div class="item"><div>test</div></div>
<div class="item"><div id="image"><a href="test.html"><img src="https://via.placeholder.com/100x75.png"></a></div></div>
</div>
</div>

我该怎么做：

<div class="wrapper">
<div class="list">
<div class="item"><div id="image">Please click to here for add a image</div></div>
<div class="item"><div id="test">test</div></div>
<div class="item"><div id="image">Please click to here for add a image</div></div>
<div class="item"><div>test</div></div>
<div class="item"><div id="image"><a href="test.html"><img src="https://via.placeholder.com/100x75.png"></a></div></div>
</div>
</div>

我的jQuery：

$(document).ready(function(){
$(".list #image").each(function() {
if($(this).is(':empty')) { $(".item #image").html("Please click to here for add a image"); }
});
});

我的 jsfiddle 代码在这里： https ://jsfiddle.net/nmw4bad6/

标签： jquery

解决方案

您的代码中有多个问题

  1. 使用重复的 id，它在上下文中应该是唯一的，在这种情况下只有第一个被选中。始终class用于对多个元素进行分组。
  2. 即使它是空的，您也可以通过选择 all( $(".item #image").html(..)) 元素来更新所有元素（即使它不会在您当前的代码中选择）。

为了使其工作，使用类对元素进行分组，然后使用:empty伪类选择器来获取空元素。实际上，在您的情况下不需要使用each()方法，因为您想更新具有相同内容的所有元素。

$(document).ready(function() {
  $(".list .image:empty").html("Please click to here for add a image");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="list">
    <div class="item">
      <div class="image">image</div>
    </div>
    <div class="item">
      <div id="test">test</div>
    </div>
    <div class="item">
      <div class="image"></div>
    </div>
    <div class="item">
      <div>test</div>
    </div>
    <div class="item">
      <div class="image">
        <a href="test.html"><img src="https://via.placeholder.com/100x75.png"></a>
      </div>
    </div>
  </div>
</div>

更新：如果您无权访问后端代码并且需要使用重复的 id，则使用属性等于选择器而不是id 选择器并执行相同操作。

$(document).ready(function() {
  $('.list [id="image"]').html("Please click to here for add a image");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="list">
    <div class="item">
      <div id="image">image</div>
    </div>
    <div class="item">
      <div id="test">test</div>
    </div>
    <div class="item">
      <div id="image"></div>
    </div>
    <div class="item">
      <div>test</div>
    </div>
    <div class="item">
      <div id="image">
        <a href="test.html"><img src="https://via.placeholder.com/100x75.png"></a>
      </div>
    </div>
  </div>
</div>

推荐阅读