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”，则该功能将退出。

非常感谢任何指向正确方向的帮助！

修改

这是我刚创造的小提琴：

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'等标记。通过直接比较（===），它们会通过。< / p>

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

这基于许多假设，显然：

您想要添加唯一的新标签
您希望用户在input中输入新标记，然后按输入

参考文献：

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

在这里你试试这个：演示 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;
         }
     });

     //
 });

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

6 个答案: