title: How to match children innerText with user input using jQuery
body: <p>I have the following structure:</p>
  
  <pre><code>&lt;div id="campaignTags"&gt;
      &lt;div class="tags"&gt;Tag 1&lt;/div&gt;
      &lt;div class="tags"&gt;Tag 2&lt;/div&gt;
      &lt;div class="tags"&gt;Tag 3&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And I'm trying to match user input against the innerText of each children of <code>#campaignTags</code></p>
  
  <p>This is my latest attempt to match the nodes with user input jQuery code:</p>
  
  <pre><code>var value = "Tag 1";
  $('#campaignTags').children().each(function(){
      var $this = $(this);
      if(value == $(this).context.innerText){
          return;
      }
  </code></pre>
  
  <p>The variable value is for demonstration purposes only. </p>
  
  <p>A little bit more of context:</p>
  
  <p>Each <code>div.tags</code> is added dynamically to <code>div#campaignTags</code> but I want to avoid duplicate values. In other words, if a user attempts to insert "Tag 1" once again, the function will exit. </p>
  
  <p>Any help pointing to the right direction will be greatly appreciated!</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>Here's a fiddle that I just created:</p>
  
  <p><a href="http://jsfiddle.net/TBzKf/2/" rel="nofollow">http://jsfiddle.net/TBzKf/2/</a></p>
  
  <p><strong>The lines related to this question are 153 - 155</strong></p>
  
  <p>I tried all the solutions, but the tag is still inserted, I guess it is because the <code>return</code> statement is just returning the latest function and the wrapper function.</p>
  
  <p>Is there any way to work around this? </p>