Question

我想弄清楚这一点，我可能只是忽略了简单。 parent1 div正在从搜索中动态填充。子div可以附加在2个父div之间。我有以下内容：

<div id="parent1">
    <div class="child1">some data</div>
</div>

<div id="parent2">
    <div class="child2">some data</div>
    <div class="child2">more data</div>
    <div class="child2">even more data</div>
</div>

<script type="text/javascript">
$('#parent1 .child1').live('click', function() {
    if($('#parent2 .child2 > "' + $(this) + '").length) {
        alert("exists!");
    }
    else
    { // not exist
        $(this).remove().appendTo('#parent2');
    }
});
</script>

我正在尝试使用jquery click事件函数来防止重复项从parent1追加到parent2。我尝试了很多东西只是为了让它总是失败。有什么想法吗？

谢谢，鲍勃

Answer 1

最佳做法是删除搜索中的重复records，而不是删除重复的DOM elements。

如果您希望remove div比较DIV元素内的文字和remove元素。

Answer 2

首先，我建议.on()使用.live()。

我的策略非常简单：当在＃parent1中的子div中触发click事件时，迭代并搜索＃parent2中子div中的所有内容。如果找到匹配则增加变量，如果没有找到则不做任何事情。

搜索完成后，评估计数。如果计数小于1（即不匹配），则复制＃parent1中单击的div中的文本并附加到＃parent2。

$(document).ready(function() {
    $(document).on('click', '#parent1 > div', function() {
        var childcontent = $(this).text(),    // Get content in clicked div
            count = 0;                        // Start counter

        // Search through each child in #parent2
        $('#parent2 > div').each(function() {
            var target = $(this).text();
            if(target.search(new RegExp(childcontent, "i")) < 0) {
                // No match found in #parent2
                // Do nothing
            } else {
                // Match is found in #parent2
                count++;
            }
        });

        // Evaluate count, make decision to append
        if(count < 1) {
            $(this).remove().clone().appendTo('#parent2');   
        }
    });
});

以下是一个工作示例：http://jsfiddle.net/teddyrised/mr2nP/

防止父div之间的重复

2 个答案: