Selectors (Selecting objects from list's)

[Eder]

Hi all,
I have a problem when selecting objects from a list, example:





XHTML:

<li class="down">Main Text
<ul>
<li><a href="#text-1">text-1</a></li>
<li><a href="#text-2">text-2</a></li>
<li><a href="#text-3">text-3</a></li>
<li><a href="#text-4">text-4</a></li>
</ul>
</li>



I've already tried something like this, but i can't access Main Text



jQuery:

jQuery("li.down").each(function() {

});


What I want to retreive is the object that represents Main Text, so then latter, I could be able to format it's style

Thanks in Advance,
Eder Quiñones

[tomws]

There might be a more elegant way to do it, but a quick and easy hack would be to wrap the text in a span tag. That would remove the ambiguity of the selectors/functions I've looked at and only accesses the desired text as opposed to all contents like text() (http://api.jquery.com/text/) does.

[Spudhead]

if you just want to format the text style, why do you need to get the object at all?

jQuery("li.down").css('color','#f00');


:confused:

[tomws]

Wouldn't the children inherit that style? That was my assumption, anyway.

[Eder]

Wouldn't the children inherit that style? That was my assumption, anyway.


You're right!
By the way, I can't wrap the text in "span" tags, because it'll change my menu's behavior.

[funkyapache]

SO you cant do this http://jsfiddle.net/upAp7/?

[Spudhead]

Wouldn't the children inherit that style? That was my assumption, anyway.

Only if a more specific style rule hasn't already been set for them -

<style type="text/css">
.down {color:#000;}
.down ul li a{color:#0c0;}
</style>

<ul>
<li class="down">Main Text
<ul>
<li><a href="#text-1">text-1</a></li>
<li><a href="#text-2">text-2</a></li>
<li><a href="#text-3">text-3</a></li>
<li><a href="#text-4">text-4</a></li>
</ul>
</li>
</ul>

$(document).ready(function(){
jQuery("li.down").css('color','#c00');
});