¿Cómo filtrar artículos dentro de un attr href con cada uno y encontrar el uso? lista de tags simple

Tengo muchos artículos div y en esos artículos; Tengo una lista de tags. Estoy intentando ocultar los divs de artículos que no tienen href = ‘#myFilter’.

No tengo ningún problema en llegar a href, mi problema es llegar a su padre () sin crear un conflicto jQuery.

Aquí está el ejemplo de jsFiddle para inspeccionar.

jQuery

//trying to hide which don't got a href '#/news' var news = '#/news'; $('.article a').each(function() { var category = $(this).attr('href'); if ( category === news ) {//select only articles got #/news href in it //$(this).parent().parent().parent().show();//trying to reach article $(this).show(); }else{ //$(this).parent().parent().parent().hide();//this way hides all articles $(this).hide();//this works only on a elements } });​ 

html:

 

Para cada uno de los artículos use un cierre para rastrear si debe ocultar el elemento actual. Esto no tendrá el parpadeo de la respuesta de nbrooks.

Como muestra este violín: http://jsfiddle.net/878zQ/14/

 var news = '#/news'; var nature = '#/nature'; var sport = '#/sport'; var hobbies = '#/hobbies'; var economy = '#/economy'; var world = '#/world'; $('.article').each(function() { var hide = 1; $(this).find('a').each(function() { var category = $(this).attr('href'); if (category == news) { hide = 0; } }); if (hide == 1) $(this).hide(); }); 

Para explicar lo que esto hace, aquí hay una descripción en inglés de la funcionalidad:

 For each page element containing a class of article. Set the hide flag to true For each a element in this page element Look at the href attribute and see if it matches the variable news If it does set the hide variable to false. If the hide flag is true hide this element. 

ACTUALIZACIÓN : Nueva demostración: http://jsfiddle.net/9GErB/ Esto elimina el flash que estaba viendo antes y también demuestra cómo puede cambiar el selector para usar una variable. Se basa en el método de filtro jQuery , que es realmente lo que requiere su pregunta.

 var news = '#/news'; var nature = '#/nature'; var sport = '#/sport'; var hobbies = '#/hobbies'; var economy = '#/economy'; var world = '#/world'; $('.article').filter(function() { return $(this).find('a[href="'+news+'"]').length==0; }).hide(); 

Esto reduce el conjunto de artículos a aquellos que coinciden con la expresión de filtro, luego los oculta. Esto es mucho más eficiente que iterar sobre artículos y luego iterar sobre enlaces dentro de cada artículo.


Actualización: demostración de trabajo http://jsfiddle.net/WfdXE/

Use el método .closest() jQuery para obtener el ancestro más cercano en el árbol de dom que coincida con un determinado selector.

 $('.article').hide(); $('.article').find('a[href="#/news"]').each(function() { $(this).closest('.article').show(); }); 

El selector de atributo jQuery es [name="value"] .

Para usar una variable de cadena aquí puedes hacer esto:

 var sel = "myFilter"; .find('a[href="'+sel+'"]') // this simply includes the text value of sel as the value 

En JS usas + para la concatenación de cadenas.

Prueba esto,

Demo en vivo

 $('.article').each(function() { $(this).find('a').each(function(){ if ( $(this).attr('href') === news ) { $(this).closest('.article').show(); return false; }else $(this).closest('.article').hide(); }); });​