0

我有以下结构：

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

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

这是我将节点与用户输入的 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语句只是返回了最新的函数和包装函数。

有没有办法解决这个问题？

4

6 回答 6

4

这个怎么样：

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

这是一个小演示，说明了这种方法的实际应用：

但也许我会在这里使用另一种方法，将标签存储在 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'通过直接比较（===）它们会通过。

演示。

于 2013-06-04T22:14:19.590 回答
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 小提琴演示。

这是基于许多假设，显然：

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

参考：

于 2013-06-04T22:17:48.820 回答
0 
var value = "Tag 1";
$('#campaignTags').find('div.tags').each(function(){
   if(value == $(this).text()){
       alert('Please type something else');
   }
});
于 2013-06-04T22:14:38.007 回答
0

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

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

或者

if(value === $this.text()){   // jQuery
    return;
}
于 2013-06-04T22:14:40.853 回答
0

不知道这是否是一个错字，但你错过了一个 close }and )。使用jquery.text()方法而不是innerText也许？

var value = "Tag 1";
$('#campaignTags').find(".tags").each(function(){
  var content = $(this).text();
  if(value === content){
    return;
  }
})
于 2013-06-04T22:17:05.850 回答
0

在这里你试试这个：演示 http://jsfiddle.net/3haLP/

由于上面的大部分帖子都有一些内容，因此这里是解决方案的另一种看法:)

同样来自我的旧答案：jquery - 获取没有子文本的元素的文本

希望它符合需要':)'并在您的主要自定义 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;
         }
     });

     //
 });
于 2013-06-04T22:18:05.130 回答