Pregunta ¿Cómo buscar en el valor del elemento?


Aquí está mi código:

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>

El resultado debe ser justo. three y two en la consola. Porque solo contienen t carta. Pero como verá, todos los valores se mostrarán en la consola.

Como he mencionado, estoy tratando de hacer un pequeño motor de búsqueda para un cuadro de autocompletar. ¿Cómo puedo arreglarlo?


5
2018-01-26 19:19


origen


Respuestas:


Según el documentación text() method devuelve una cadena que contiene el texto combinado de todos los elementos coincidentes que muestra en su consola, en su lugar debe iterar sobre ellos. Aunque su condición es incorrecta, que solo falla cuando el índice es 0(0 es falsy valor y todos los demás valores enteros son verdad en Javascript), debería ser .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>


La forma más simple es usar CSS :contains() selector de pseudo-clase e iterar sobre los elementos usando each() método.

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


ACTUALIZAR: Puedes usar map() método con get() método para obtener como una matriz.

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>


3
2018-01-26 19:23



Puedes usar contiene 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>


4
2018-01-26 19:21



$('span') selecciona todos los elementos de tramo en la página. Si necesita trabajar con ellos individualmente, debe recorrer todo el span Elementos y prueba la condición en elementos individuales. Puedes usar .each función para esto.

También, índice de devoluciones -1 si la cadena no contiene el argumento, entonces debe compararlo con -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>


3
2018-01-26 19:21



Debes recorrer los elementos y verificar los valores usando > operador:

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

Puedes leer más sobre each() método aquí.


3
2018-01-26 19:22



$ ('span'). text () devuelve el texto vinculado de cada span en la matriz, por lo que debe iterar a través de los elementos span con for o cada método (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());
    }
 }

2
2018-01-26 19:30