Obtener texto y mostrarlo dentro de otro elemento

mmchu · #1 (**permalink**) 01/06/2012, 11:36

Tengo un menu dropdown en wordpress llamando los tags como una lista, el resultado es este (se puede ver en funcionamiento en http://patricioherrera.com.ar/portfolio/):

Código HTML:

<dl class="dropdown">
<dt><a><span>Select a Field</span></a></dt>
<dd>
<ul id="menu-tags-menu" class="menu">
<li id="menu-item-159" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-14 current_page_item current_page_parent menu-item-159"><a href="http://patricioherrera.com.ar/portfolio/">All Fields</a></li>
<li id="menu-item-54" class="menu-item menu-item-type-taxonomy menu-item-object-post_tag menu-item-54"><a href="http://patricioherrera.com.ar/tag/branding/">Branding</a></li>
<li id="menu-item-55" class="menu-item menu-item-type-taxonomy menu-item-object-post_tag menu-item-55"><a href="http://patricioherrera.com.ar/tag/print-design/">Print Design</a></li>
<li id="menu-item-57" class="menu-item menu-item-type-taxonomy menu-item-object-post_tag menu-item-57"><a href="http://patricioherrera.com.ar/tag/web-design/">Web Design</a></li>
<li id="menu-item-56" class="menu-item menu-item-type-taxonomy menu-item-object-post_tag menu-item-56"><a href="http://patricioherrera.com.ar/tag/ui-design/">UI Design</a></li>
<li id="menu-item-52" class="menu-item menu-item-type-taxonomy menu-item-object-post_tag menu-item-52"><a href="http://patricioherrera.com.ar/tag/motion-graphics/">Motion Graphics</a></li>
<li id="menu-item-53" class="menu-item menu-item-type-taxonomy menu-item-object-post_tag menu-item-53"><a href="http://patricioherrera.com.ar/tag/illustration/">Illustration</a></li>
</ul>
</dd>
</dl>

Necesito mediante javascript obtener el texto del elemento de la lista con clase activa (current-menu-item) y que lo muestre dentro del <dt> así el contenido del dt sería dinámico y me mostraría la sección activa en lugar de "Select a Field".

Me dijeron que podía usar .each y .hasClass, pero todavía mucho no entiendo,
alguien me puede dar una mano con esto?

Gracias!

emprear · #2 (**permalink**) 01/06/2012, 12:17

Algo asi

Código HTML:

Ver original<!DOCTYPE html>
<html lang="es-ar">
<head>
<meta charset="utf-8" />
<title>Contar elementos</title>
<meta name="description" content="Contar elementos" />
<script type="text/javascript">
//<![CDATA[
// con una clase específica
var tags_li = new Array();
function dli(clase) {
var tags_li=document.getElementsByTagName('li');
var i;
for (i=0; i<tags_li.length; i++) {
if (tags_li[i].className=='abc') {
var texto = tags_li[i].innerHTML;
document.getElementById("mensajes").innerHTML = texto;
}
}
 
}
//]]>
</script>
</head>
<body onload="dli('abc')">
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
<hr />
<ul>
<li class="a">1</li>
<li class="abc">xllsls</li>
<li class="a">3</li>
<li class="a">4</li>
<li class="a">5</li>
<li class="a">6</li>
</ul>
</div>
<div id="mensajes"><!-- fix --></div>
</body>
</html>

SAludos

IsaBelM · #3 (**permalink**) 01/06/2012, 14:43

lo puedes hacer con una sola línea de código si usas

Cita:

querySelector('.class').innerHTML

mmchu · #4 (**permalink**) 01/06/2012, 16:29

Perfecto, problema solucionado :)
Gracias a los dos!