jQuery 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() 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');

[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]

Originally Posted by tomws

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');
});