Here is my code:

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

<script src=".1.1/jquery.min.js"></script>
<span>one</span>
<span>two</span>
<span>three</span>
<span>four</span>
<span>five</span>
<span>six</span>

Here is my code:

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

<script src="https://ajax.googleapis./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 console. Because just they contain t letter. But as you see all values will be shown in the console.

As I've mentioned, I'm trying to make a small search engine for a autoplete box. How can I fix it?

• javascript
• jquery
• html

• The answer are all missing an explanation why your script won't do what you want it to do... The summary: $("span") gets every <span> element in the document, .text() returns the text of all matched elements bined as one string, .indexOf(searchValue) returns -1 if searchValue has not been found – Andreas Commented Jan 26, 2017 at 19:27
• @Andreas I see, thank you – stack Commented Jan 26, 2017 at 19:43

5 Answers 5

You can to use contains selector:

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

<script src="https://ajax.googleapis./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>

As per the documentation text() method returns a string containing the bined text of all matched elements that what it showing in your console, instead you need to iterate over them. Even though your condition is wrong, which only fails when the index is 0(0 is falsy value and all other integer values are truthy 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./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 simplest way is to use CSS :contains() pseudo-class selector and iterate over the elements using each() method.

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

<script src="https://ajax.googleapis./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() method with get() method to get as an array.

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

<script src="https://ajax.googleapis./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>

$('span') selects all the span elements on the page. If you need to work with them individually, you need to loop over all the span elements and test the condition on individual items. You can use .each function for this.

Also, indexOf returns -1 if the string doesn't contain the argument, so you need to pare it with -1.

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

<script src="https://ajax.googleapis./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>

You should loop through the elements and check the values using > operator:

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

<script src="https://ajax.googleapis./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>

You can read more about each() method here.

$('span').text() return linked text of every span in array, so you must iterate through span elements with for, or each (jQuery) method:

 $('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());
    }
 }