如何使用jQuery将子innerText与用户输入匹配

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，但我想避免重复值。换句话说，如果用户再次尝试插入“Tag 1”，该函数将退出。

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

编辑

这是我刚刚创建的小提琴：

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.

Answer 2

我建议：

$('#addTag').keyup(function (e) {
    if (e.which === 13) {
        var v = this.value,
            exists = $('#campaignTags').children().filter(function () {
                return $(this).text() === v;
            }).length;
        if (!exists) {
            $('<div />', {
                'class': 'tags',
                'text': v
            }).appendTo('#campaignTags');
        }
    }
});

JS Fiddle demo.

这显然是基于一些假设：

1. 您想添加独特的新标签，
2. 您希望用户在input 中输入新标签，然后按enter 添加

参考资料：

• appendTo()。
• filter()。
• keyup()。

Answer 3

var value = "Tag 1";
$('#campaignTags').find('div.tags').each(function(){
   if(value == $(this).text()){
       alert('Please type something else');
   }
});

Answer 4

您可以使用 .innerHTML 或 .text()

 if(value === this.innerHTML){ // Pure JS
       return;
  }

或

if(value === $this.text()){   // jQuery
    return;
}

Answer 5

不确定是否是拼写错误，但您错过了关闭的 } 和 )。使用 jquery .text() 方法而不是 innerText 或许？

var value = "Tag 1";
$('#campaignTags').find(".tags").each(function(){
  var content = $(this).text();
  if(value === content){
    return;
  }
})

Answer 6

你可以试试这个：Demo http://jsfiddle.net/3haLP/

由于上面的大部分帖子都提出了一些问题，这里是解决方案:)的另一种看法

也来自我的旧答案：jquery - get text for element without children text

希望它符合需要 ':)' 并在您的主要自定义 Jquery 库中添加该 justext 函数

代码

 jQuery.fn.justtext = function () {

     return $(this).clone()
         .children()
         .remove()
         .end()
         .text();

 };

 $(document).ready(function () {
     var value = "Tag 1";
     $('#campaignTags').children().each(function () {
         var $this = $(this);
         if (value == $(this).justtext()) {
             alert('Yep yo, return');)
             return;
         }
     });

     //
 });