将图标插入第三个 td 而前两个 td 为空

Question

我需要一些关于 jQuery 的帮助，以便在 td id="person-action-{{ person.id }}" 中插入两个图标，而另外两个具有相同 {{person 的 tds .id}} 为空 f.e.

<td id="person-phone-{{ person.id }}"></td>
<td id="person-email-{{ person.id }}"></td>
<td id="person-action-{{ person.id }}"></td>

我刚刚编写了一些简单的代码。

    $(document).ready(function(){
        var emptyPhone = $('#person-phone-{{ person.id }}').is(':empty')
        var emptyEmail = $('#person-email-{{ person.id }}').is(':empty')
        $('#person-action-{{ person.id }}').each(function(){
            if (emptyPhone || emptyEmail ){
             // do something
            }
        });
    });

编辑： 感谢@wiertel 很好的提示，我进一步推动了我的代码，现在我想知道如何在这个#person-action 中添加一些东西，在当前的tr 中有空的电话和电子邮件单元格。我尝试用下面的代码做一些事情：

    $(document).ready(_ => {
      $('#addressTab tbody tr').each((i, el) => {
        tr = $(el);
        id = tr.data('person-id');
        empty_phone = tr.find('#person-phone').is(':empty');
        empty_email = $('#person-email', tr).is(':empty');
        if (empty_phone && empty_email){
            $('#person-action').append("<i class='small material icons'>delete</i>");
        }
  });
});

实际结果： 预期结果：

Answer 1

您应该知道从模板生成的 HTML 的样子。我很确定当你的 JS 代码执行时，页面中没有 {{ person.id }} 片段。

您正在评估 emptyPhone 和 emptyEmail 一次，然后重用 jQuery 找到的每个元素的值。这不是你想要的。

我的建议是：

• 使用分配给<tr> 的那些<td> 所属的类并将ID 也保存在那里（<tr class="userInfoRow" data-user-id="{{person.id}}">）
• 这样您就可以使用 jQuery ($("tr.userInfoRow")) 找到所有项目
• 找到它们后，对其进行迭代，提取用户 ID，并分别检查每个项目