Question

I’m trying to update the <span> within an anchor depending on whether you click or not. If you click it and the slide is open, it’s ‘navigateup’, if it’s not active, it’s ‘navigatedown’.

I have this working if it’s the whole anchor that needs changing, but I just need to change the span. Also, I could write a separate script for it, but I thought it would be best to include it within the jQuery that already exists.

Any ideas?

I have this HTML:

<li class="page_item page-item-29 parent"><a href="#">Clinical/Laboratory<span class="ss-icon navigation-drop-icon">navigatedown</span></a></li>

This is my jQuery:

$(".sub-navigation li.parent > a").click(function(e) {
   e.preventDefault()
   $(this).text($(this).text() == 'navigateup' ? 'navigatedown' : 'navigateup');
   $(this).closest('.parent').find("> .children").slideToggle(400);
});

Thanks,
R

Answer 1

If I understand you correct, you could provide the span as a selector for the text and then use this as the context to look within, something like this:

 $("span", this).text($("span", this).text() == 'navigateup' ? 'navigatedown' : 'navigateup');

The jQuery function allow you to pass a second parameter, which is the context to look within when using your selector. The span selector will only match span-elements within the clicked element in this case.

According to the documentation, the context can be:

A DOM Element, Document, or jQuery to use as context

I think jQuery uses the .find() method behind the scenes, so in your case the above example is just a shorthand for $(this).find("span")