Filtrar Elementos con JavaScript mostrar u ocultar partes de web al hacer click

[duralai]

Hola, quería saber como puedo filtrar elementos dependiendo de su contenido, me imagino que se hace con Javascript pero no estoy seguro.

Lo que quisiera filtrar son elementos DIV dentro de tros DIV.

Código: [Seleccionar]

<div id="commentaryContent" class="scrolling">
 <div class="comment">
                  <div class="commentMinute">01'03"</div>
                  <div class="commentContent">
                    <div class="ASI statImage">
                      <div class="statCommentEntry">Lunes</div>
                    </div>
                  </div>
                </div>
 <div class="comment">
                  <div class="commentMinute">12'17"</div>
                  <div class="commentContent">
                    <div class="ASI statImage">
                      <div class="statCommentEntry">Martes</div>
                    </div>
                  </div>
                </div>
 <div class="comment">
                  <div class="commentMinute">22'11"</div>
                  <div class="commentContent">
                    <div class="ASI statImage">
                      <div class="statCommentEntry">Miércoles</div>
                    </div>
                  </div>
                </div>
 <div class="comment">
                  <div class="commentMinute">09'23"</div>
                  <div class="commentContent">
                    <div class="ASI statImage">
                      <div class="statCommentEntry">Jueves</div>
                    </div>
                  </div>
                </div>
 <div class="comment">
                  <div class="commentMinute">10'08"</div>
                  <div class="commentContent">
                    <div class="ASI statImage">
                      <div class="statCommentEntry">Viernes</div>
                    </div>
                  </div>
                </div>
</div>
Y abajo quisiera ver solo algunos, por ejemplo solo los que digan "Lunes", "Martes" y "Jueves".
Es decir, a este código tal cual se lo vería así en un navegador:

01'03" Lunes
12'17" Martes
22'11" Miércoles
09'23" Jueves
10'08" Viernes

Y lo que me gustaría hacer es poder hacer mas abajo, sin borrar nada, un filtro, que muestre solo algunos elementos pero siempre respetando el orden en el que aparecen arriba, y como este es solo un ejemplo los días están en orden y solo hay 1 de cada 1 pero no es así en el caso real.
Por ejemplo poder ver solo:

01'03" Lunes
12'17" Martes
09'23" Jueves

Y me preguntaba como se hace habitualmente este tipo de cosas en Html, me imagino que con document.getElementById en un array y luego recorrerlo filtrando los que tienen X texto que también estaría en otro id, de cual se seleccionarían los días, pero como estoy aprendiendo no estoy seguro de cual es la mejor manera de hacer este tipo de cosas.

Gracias de antemano, solo quiero una orientación ya que estoy aprendiendo, saludos!

[Alex Rodríguez]

Hola duralai, en este curso lo tienes explicado: http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=78&Itemid=206

Si sigues el curso podrás resolverlo fácilmente.

Saludos

[duralai]

Hola, leí todo el curso 2 veces pero me es muy difícil lograr hacer una función para esto, por eso pido una orientación acá en el foro, ademas acá hay gente experta que quizás me muestre una forma de hacerlo mas fácil, ya me paso que al no conocer todas las herramientas de HTML y JAVASCRIPT di muchas vueltas para hacer algo de una manera que otro que sabe mas lo simplifica enormemente.
Yo leí todos los cursos, PHP, JAVASCRIPT, HTML, CSS y hasta de MySQL, pero entiendan que para los que recién empezamos no es fácil, ademas al estar todo relacionado, por lo menos a mi, me es muy difícil acordarme de todo, se me mezcla todo.
Así que si alguien puede tomarse unos minutos para ayudarme lo agradezco enormemente, porque repito, no es cuestión de no haber leído el curso, solo en este tema particular, el del DOM se me complican las cosas un poco. Saludos cordiales!

[Ogramar]

Hola yo también te recomiendo que hagas el curso... haciéndolo aprenderás a resolver este tipo de problemas y más.

Una posible solución:

Código: [Seleccionar]

<html>
<head>
<meta charset="utf-8" />
 <style type="text/css">
body {background-color:white; font-family: sans-serif;}
p {font-size: 24px; color: maroon; float: left; margin:10px; border: solid black; padding:10px;}
.boton{padding:15px; width: 330px;  text-align:center; clear:both;
color: white; border-radius: 40px; background: rgb(202, 60, 60);}
.boton:hover {background: rgb(66, 184, 221);}
</style>
<script type="text/javascript">
function filtrar (classRecibida) {
nodosAfiltrar = document.querySelectorAll('.'+classRecibida);
//alert ('Tenemos '+nodosAfiltrar.length)
        for (var i=0; i<nodosAfiltrar.length; i++) {
//alert ('Tenemos ahora'+nodosAfiltrar[i].childNodes[3].childNodes[1].childNodes[1].innerHTML)
if (nodosAfiltrar[i].childNodes[3].childNodes[1].childNodes[1].innerHTML =='Martes'
|| nodosAfiltrar[i].childNodes[3].childNodes[1].childNodes[1].innerHTML =='Miércoles') {
                nodosAfiltrar[i].style.backgroundColor = "yellow";
                nodosAfiltrar[i].style.color = "black";
                nodosAfiltrar[i].style.border = "solid 1px";}
else {nodosAfiltrar[i].style ='display:none';}
                }
}

</script>
</head>
<body>

<div id="commentaryContent" class="scrolling">
 <div class="comment">
                  <div class="commentMinute">01'03"</div>
                  <div class="commentContent">
                    <div class="ASI statImage">
                      <div class="statCommentEntry">Lunes</div>
                    </div>
                  </div>
                </div>
 <div class="comment">
                  <div class="commentMinute">12'17"</div>
                  <div class="commentContent">
                    <div class="ASI statImage">
                      <div class="statCommentEntry">Martes</div>
                    </div>
                  </div>
                </div>
 <div class="comment">
                  <div class="commentMinute">22'11"</div>
                  <div class="commentContent">
                    <div class="ASI statImage">
                      <div class="statCommentEntry">Miércoles</div>
                    </div>
                  </div>
                </div>
 <div class="comment">
                  <div class="commentMinute">09'23"</div>
                  <div class="commentContent">
                    <div class="ASI statImage">
                      <div class="statCommentEntry">Jueves</div>
                    </div>
                  </div>
                </div>
 <div class="comment">
                  <div class="commentMinute">10'08"</div>
                  <div class="commentContent">
                    <div class="ASI statImage">
                      <div class="statCommentEntry">Viernes</div>
                    </div>
                  </div>
                </div>
</div>
<h3 class="boton" onclick="filtrar('comment')">Pulse aquí para filtrar días que empiezan por m</h3>
</body>
</html>
Salu2