javascript - 如何使用 jQuery 将子级 insideText 与用户输入进行匹配

Question

我有以下结构:

<div id="campaignTags">
    <div class="tags">Tag 1</div>
    <div class="tags">Tag 2</div>
    <div class="tags">Tag 3</div>
</div>

我正在尝试将用户输入与#campaignTags的每个子项的innerText进行匹配

这是我将节点与用户输入 jQuery 代码进行匹配的最新尝试:

var value = "Tag 1";
$('#campaignTags').children().each(function(){
    var $this = $(this);
    if(value == $(this).context.innerText){
        return;
    }

该变量值仅用于演示目的。

更多的上下文:

每个 div.tags 都会动态添加到 div#campaignTags 但我想避免重复的值。换句话说，如果用户尝试再次插入“标签1”，该功能将退出。

任何指向正确方向的帮助将不胜感激!

编辑

这是我刚刚创建的 fiddle :

http://jsfiddle.net/TBzKf/2/

与此问题相关的行是 153 - 155

我尝试了所有的解决方案，但标签仍然插入，我猜这是因为 return 语句只是返回最新的函数和包装函数。

有什么办法可以解决这个问题吗？

Answer 1

这个怎么样:

var $taggedChild = $('#campaignTags').children().filter(function() {
  return $(this).text() === value;
});

这是一个little demo ，说明了这种方法的实际应用:

<小时/>

但也许我会在这里使用另一种方法，将标签存储在 JS 本身中，并在必要时更新此哈希。像这样的事情:

var $container = $('#campaignTags'),
    $template  = $('<div class="tags">'),
    tagsUsed   = {};
$.each($container.children(), function(_, el) {
    tagsUsed[el.innerText || el.textContent] = true;
});

$('#tag').keyup(function(e) {
    if (e.which === 13) {
        var tag = $.trim(this.value);
        if (! tagsUsed[tag]) {
            $template.clone().text(tag).appendTo($container);
            tagsUsed[tag] = true;
        }
    }
});

我在这里使用了$.trim来预处理值，以防止添加诸如'Tag 3'、'Tag 3'之类的标签等等。通过直接比较( === )，他们会通过。

Demo .