Question

<ul class="filter">
<li>
<span class="filtertext"><span>Filter</span></span>
<ul class="dropdown">
<li class="active"><a href="javascript:void(0)">All</a</li>

<li><a href="#">Administrative Associates</a></li>
<li><a href="#">Associate Principals</a></li>
<li><a href="#">Associates</a></li>
<li><a href="#">Chief Financial Officer</a></li>
<li><a href="#">Directors</a></li>
<li><a href="#">Principals</a></li>
<li><a href="#">Senior Associates</a></li>
<li><a href="#">Staff</a></li>
</ul></li>
</ul>

I have a filter set up with Quicksand and the above list is displaying a dropdown on my site. What I am trying to do is replace the text “Filter” that is in the tag with text from whatever category is selected.

I have this working, however, it only does it the first time. I have a feeling I need to implement something like .each() but can’t seem to figure out where exactly I should put it. Following is my jQuery code:

$('ul.dropdown li a').click(function (){
$('span.filtertext span').replaceWith( $(this).html() );
});

Please let me know if you need more information. Thank you!

Answer 1

The reason it only work the first time is because you’re using replaceWith, which actually removes the element; the next time your function runs, $('span.filtertext span') can’t find anything.

Use this instead (adds caching too):

var $filtertext = $('span.filtertext span');
$('ul.dropdown li a').click(function () {
    $filtertext.text( $(this).text() );
});