How to search for the value of an element?

Question

Here is my code:

if($('span').text().indexOf("t")){ console.log($('span').text()); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <span>one</span> <span>two</span> <span>three</span> <span>four</span> <span>five</span> <span>six</span> 

The result should be just three and two in the console. Because they contain the letter t . But, as you can see, all values ​​will be displayed on the console.

As I said, I'm trying to create a small search engine for autocomplete. How can i fix this?

Answer 1

According to the documentation text() method returns a string containing the combined text of all the matched elements that it shows on your console, instead you need to iterate over them. Despite the fact that your condition is false, that does not work when the index is 0 ( 0 is a falsy value and all other integers are truthy values ​​in Javascript), it should be .indexOf("t") > -1 .

 $('span').each(function() { if ($(this).text().indexOf("t") > -1) console.log($(this).text()); }) // or use text() method with callback which holds // old value as second argument and iterates internally $('span').text(function(i, txt) { if (txt.indexOf("t") > -1) console.log(txt); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <span>one</span> <span>two</span> <span>three</span> <span>four</span> <span>five</span> <span>six</span> 

---

The easiest way is to use CSS :contains() pseudo-class selector and iterate over the elements using each() .

 $('span:contains("t")').each(function() { console.log($(this).text()); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <span>one</span> <span>two</span> <span>three</span> <span>four</span> <span>five</span> <span>six</span> 

---

UPDATE: You can use map() with get() to get as an array.

 console.log($('span:contains("t")').map(function() { return $(this).text(); }).get()) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <span>one</span> <span>two</span> <span>three</span> <span>four</span> <span>five</span> <span>six</span> 

Answer 2

You can use contains selector:

 $('span:contains("t")').each(function(){ console.log($(this).text()); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <span>one</span> <span>two</span> <span>three</span> <span>four</span> <span>five</span> <span>six</span> 

Answer 3

$('span') selects all span elements on the page. If you need to work with them separately, you need to iterate over all span elements and check the condition for individual elements. You can use .each for this.

In addition, indexOf returns -1 if the string does not contain an argument, so you need to compare it with -1 .

 $('span').each(function () { if($(this).text().indexOf("t") != -1){ console.log($(this).text()); } }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <span>one</span> <span>two</span> <span>three</span> <span>four</span> <span>five</span> <span>six</span> 

Answer 4

You must skip the elements and check the values ​​using the > operator:

 $('span').each(function() { if ($(this).text().indexOf("t") > -1) { console.log($(this).text()); } }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <span>one</span> <span>two</span> <span>three</span> <span>four</span> <span>five</span> <span>six</span> 

Read more about each() method here .

Answer 5

$ ('span'). text () returns the bound text of each range in the array, so you should iterate over the span elements with for or each method (jQuery):

  $('span').each(function () { if($(this).text().indexOf("t") > 0){ console.log($(this).text()); } }); var elems = $('span'); for(var i=0; i<elems.length; i++){ if($(elems[i]).text().indexOf("t") > 0){ console.log($(this).text()); } }