How to match children innerText with user input using jQuery

Question

I have the following structure:

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

And I'm trying to match user input against the innerText of each children of #campaignTags

This is my latest attempt to match the nodes with user input jQuery code:

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

The variable value is for demonstration purposes only.

A little bit more of context:

Each div.tags is added dynamically to div#campaignTags but I want to avoid duplicate values. In other words, if a user attempts to insert "Tag 1" once again, the function will exit.

Any help pointing to the right direction will be greatly appreciated!

EDIT

Here's a fiddle that I just created:

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

The lines related to this question are 153 - 155

I tried all the solutions, but the tag is still inserted, I guess it is because the return statement is just returning the latest function and the wrapper function.

Is there any way to work around this?

probably because I've been switching between symfony and javascript for the last 11 hours lol! :) — ILikeTacos, Jun 04 '13 at 22:15

raina77ow · Accepted Answer · 2013-06-04T22:45:07.290

4

How about this:

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

Here's a little demo, illustrating this approach in action:

But perhaps I'd use here an alternative approach, storing the tags within JS itself, and updating this hash when necessary. Something like this:

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;
        }
    }
});

I used $.trim here for preprocessing the value, to prevent adding such tags as 'Tag 3 ', ' Tag 3' etc. With direct comparison ( === ) they would pass.

Demo.

edited Jun 04 '13 at 22:45

answered Jun 04 '13 at 22:14

raina77ow

103,633
15
192
229

And then the check would be `if($taggedChild.length > 0){return;}` right? Does filter still return an array of jQuery objects? I'd expect it would. – nzifnab Jun 04 '13 at 22:20
It returns a jQuery object, right, so you should check its `length`. – raina77ow Jun 04 '13 at 22:21
I'd say this is the best answer. Forgot about `filter` :) – nzifnab Jun 04 '13 at 22:24
This is a pretty good one unfortunately, when I used your snippet in the rest of my code it doesn't work, and I don't quite understand why. Would you mind checking the link that I posted just a few minutes ago? – ILikeTacos Jun 04 '13 at 22:39
Ignore the last comment, I didn't pay close attention to your demo! This worked like a charm!! thanks a bunch. – ILikeTacos Jun 04 '13 at 22:43

score 2 · Answer 2 · answered Jun 04 '13 at 22:17

I'd suggest:

$('#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.

This is based on a number of assumptions, obviously:

You want to add unique new tags,
You want the user to enter the new tag in an input, and add on pressing enter

References:

score 0 · Answer 3 · answered Jun 04 '13 at 22:14

0

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

answered Jun 04 '13 at 22:14

Fabi

973
7
18

score 0 · Answer 4 · answered Jun 04 '13 at 22:14

0

you can user either .innerHTML or .text()

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

OR

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

answered Jun 04 '13 at 22:14

Sushanth --

55,259
9
66
105

score 0 · Answer 5 · answered Jun 04 '13 at 22:17

Not sure if it was a typo, but you were missing a close } and ). Use the jquery .text() method instead of innerText perhaps?

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

score 0 · Answer 6 · edited May 23 '17 at 12:31

Here you go try this: Demo http://jsfiddle.net/3haLP/

Since most of the post above comes out with something here is another take on the solution :)

Also from my old answer: jquery - get text for element without children text

Hope it fits the need ':)' and add that justext function in your main customised Jquery lib

Code

 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;
         }
     });

     //
 });

How to match children innerText with user input using jQuery

6 Answers6