javascript - 检查 DOM 中是否存在元素，如果不存在，则在每次单选输入后添加

Question

我正在更改表单上单选按钮的默认外观。为此，我使用 jQuery 在输入标签后添加了一个 span 标签。这适用于在页面加载时呈现的单选按钮。但是，该表单使用条件来隐藏两个问题，这两个问题不会在输入后添加跨度，因为它们在有条件地显示之前不存在。该表单有一个 js Hook ，当有条件地添加我正在 Hook 的新字段时会触发该 Hook 。 我的问题是，如果用户有条件地揭示这两个问题，这个 span 元素会被多次添加，而我只需要添加一次。

我尝试检查是否有重复的 span 标签在创建新标签后删除，但我没有让它工作。我尝试将新创建的单选按钮保存在节点列表中并循环遍历它们，但最终添加的 span 标签与节点列表的长度一样多。

<!-- here is the html, the span is needed after the input tag -->
<div class="radio">
    <label>
        <input type="radio">
    </label>
</div>

// Adds the span to the hidden elements as they are revealed
$(document).on('cf.add', function() {

    if ($('.caldera-forms-conditional-field .radio input[type=radio] .radiomark').length == 0) {
        $(".caldera-forms-conditional-field .radio input[type=radio]").after("<span class='radiomark'></span>");
    }

});

它会根据需要添加 span，但问题是当 js 钩子(Hook)再次触发时，它会向每个单选按钮添加额外的 span 标签。如果用户更改触发 Hook 的单选按钮上的答案，它会添加更多跨度标签。有没有办法检查多个 span 标签并删除重复项？

Answer 1

您正在使用后代(选择器之间的空格)选择器。它查找作为子元素或较低子元素的任何元素。相反，您将 span 放置在同一个父级中的输入之后。您想要的是相邻的兄弟选择器 (+)，以防止在跨度已经存在的情况下添加额外的跨度。兄弟选择器查找与输入元素具有相同父元素且位于输入元素之后的元素

例如

<div class="radio"><!-- this is an element -->
    <label><!-- this is both a child and descendant of the div.radio element -->
        <input type="radio"><!-- this is a descendant of the div.radio element -->
    </label>
</div>

但是，

<div class="radio">
    <label>
        <input type="radio"> <!-- This is the element you are looking for -->
    </label>
</div>

脚本调用一次后，

<div class="radio">
    <label>
        <input type="radio">
        <span class="radiomark"></span><!-- This element gets added, it is a sibling of the input element -->
    </label>
</div>

因此，使用 + 查找 sibling :

$(document).on('cf.add', function() {

    if ($('.caldera-forms-conditional-field .radio input[type=radio] + .radiomark').length == 0) {
        $(".caldera-forms-conditional-field .radio input[type=radio]").after("<span class='radiomark'></span>");
    }

});