如何使用 jquery 在相同的 class 名称不同的数据 ID 中插入 html？

Question

作为 jquery 的新手，我遇到了一个简单的问题。我的情况是 class 相同但 class 名称不同。现在我需要在 data-id 为真时显示一个 html，在 data-id 为假时显示另一个 html。我的代码是：

<div class="emailSent" data-id="True"></div>
<div class="emailSent" data-id="False"></div>
<div class="emailSent" data-id="False"></div>

我的jquery代码是：

if ($(".emailSent").attr("data-id") == "True") {
  $(".emailSent").html("&#10004;&#65039;")
} else {
  $(".emailSent").html("&#10060;")
}

在尝试上面的代码时，我总是先得到 html div。我该怎么做？

https://jsfiddle.net/u1j9hatc/

Answer 1

$(".emailSent") 正在返回多个元素 (3)，其中有 class emailSent.

您需要使用 .each()

遍历它们

更多信息：https://api.jquery.com/each/

Answer 2

您需要 loop 到 class，因为有多个 class 同名

$('.emailSent').each(function(){
    if($(this).data('id') == "True"){
        $(this).html("&#10004;&#65039;");
    } else {
        $(this).html("&#10060;");
    }
    
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="emailSent" data-id="True"></div>
<div class="emailSent" data-id="False"></div>
<div class="emailSent" data-id="False"></div>

Answer 3

您是否要在 false div 上设置红叉并在 true 上设置绿色复选标记？

然后你可以在使用 data-id select 时简单地 select 那些类或这样做：

$(".emailSent[data-id='False']").html("&#10060;")
$(".emailSent[data-id='True']").html("&#10004;&#65039;")

在这里，我们select所有使用data-id='False'或'True'的电子邮件发送类并更改他们的html内容。

我们可以遍历每个 .emailSent 并执行类似的操作，但是由于 jQuery 修改了每个元素的 html selected，所以这样做更简单这个。

你可以试试：https://jsfiddle.net/mxyapL4r/

如何使用 jquery 在相同的 class 名称不同的数据 ID 中插入 html？

How to use jquery to insert html in same class name different data-id?

html

javascript

jquery

jquery-ui