CODEWITHSUNDEEP
javascriptjqueryhtml
stack
stack

Reputation: 10228

How to search at element's value?

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 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 autocomplete box. How can I fix it?

Upvotes: 5

Views: 185

Answers (5)

Pranav C Balan
Pranav C Balan

Reputation: 115242

As per the documentation text() method returns a string containing the combined 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.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 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.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() 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.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>

Upvotes: 3

Ionut Necula
Ionut Necula

Reputation: 11480

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.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>

You can read more about each() method here.

Upvotes: 3

Nedim Hozić
Nedim Hozić

Reputation: 1901

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

Upvotes: 2

Aᴍɪʀ
Aᴍɪʀ

Reputation: 7803

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

Upvotes: 3

BrTkCa
BrTkCa

Reputation: 4783

You can to 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>

Upvotes: 4

Related Questions