javascript - 在追加之前检查 HTML 元素是否存在

Question

我需要一种方法来在附加之前检查文档中是否存在动态创建的隐藏输入元素。

我知道有类似的问题，但我的问题与他们不同，因为其他问题似乎是关于使用选择器附加元素的基本问题，例如

if ($('#button').length)

检查带有 #button id 的元素是否已经存在。

但是在我的代码中，当我动态创建 input 元素时，它们的名称值属性将不同。所以我需要在追加之前判断整个元素是否在循环中一一存在。有没有办法在 jQuery 中做到这一点？

$('input[type=radio]:checked').each(function(){

//Something like this
if($('<input type="hidden" name="data[' + $(this).val() + ']" value="' + $(this).val() + '" />').length)
 {
 $('#addCharacters').append('<input type="hidden" name="data[' + $(this).val() + ']" value="' + $(this).val() + '" />');
 }
});

Answer 1

通过 jQuery，您可以使用 .is()函数来测试元素/元素序列是否匹配您指定的条件。这特别有用，因此您不必担心转义字符串。例如:

$('input:radio:checked').each(function(){
    var cur = $(this).val();
    if(!$('#addCharacters input:hidden')
        .is(function(i,e){ return e.value==cur && e.name=='data['+cur+']'; }))
    {
        // Append new element
    }
});

如果您有很多 radio 元素要检查，您可能希望将匿名函数移到其他地方，这样就不会为您正在检查的每个 radio 元素都创建它。

在此处查看迷你猜谜游戏中的扩展示例:https://jsfiddle.net/bv6abj7L/2/