jQuery and .css() problem

I have to style a ul like so:

<ul id="accordion">
    <li id="block.mainnavigation.cell">
        <ul style="display: block; font-weight: bold;">
            <li id="block.mainnavigation.cell">
                <a target="" href="/event/catalog:items/categoryCode/COFFEEGRND" id="block.mainnavigation.link">Ground Coffee</a>
                <ul style="display: block;">
                    <li id="block.mainnavigation.cell">
                        <a target="" href="/event/catalog:items/categoryCode/COFFEEGRNDCAFECOLL" id="block.mainnavigation.link" style="font-weight: normal;">Café Collection Coffee</a>
                    </li>
                    <li id="block.mainnavigation.cell">
                        <a target="" href="/event/catalog:items/categoryCode/COFFEEGRNDFAIRTRAD" id="block.mainnavigation.link" style="font-weight: n开发者_StackOverflow社区ormal;">Fair Trade Organic Coffee</a>
                    </li>
                    <li id="block.mainnavigation.cell">
                        <a target="" href="/event/catalog:items/categoryCode/COFFEEGRNDOTHER" id="block.mainnavigation.link" style="font-weight: normal;">Ground Coffee Other</a>
                    </li>
                    <li id="block.mainnavigation.cell">
                        <a target="" href="/event/catalog:items/categoryCode/COFFEEGRNDPREMCAN" id="block.mainnavigation.link" style="font-weight: normal;">Premium Coffee -Can</a>
                    </li>
                </ul>
            </li>
            <li id="block.mainnavigation.cell">
                <a target="" href="/event/catalog:items/categoryCode/COFFEEPOD" id="block.mainnavigation.link">Coffee Pods</a>
            </li>
            <li id="block.mainnavigation.cell">
                <a target="" href="/event/catalog:items/categoryCode/COFFEEWHLBN" id="block.mainnavigation.link">Whole Bean Coffee</a>
                <ul style="display: block;">
                    <li id="block.mainnavigation.cell">
                        <a target="" href="/event/catalog:items/categoryCode/COFFEEWHLBNBULK" id="block.mainnavigation.link" style="font-weight: normal;">Whole Bean Coffee Bulk</a>
                    </li>
                    <li id="block.mainnavigation.cell">
                        <a target="" href="/event/catalog:items/categoryCode/COFFEEWHLBNCAFECOLL" id="block.mainnavigation.link" style="font-weight: normal;">Café Collection Coffee</a>
                    </li>
                    <li id="block.mainnavigation.cell">
                        <a target="" href="/event/catalog:items/categoryCode/COFFEEWHLBNOTHER" id="block.mainnavigation.link" style="font-weight: normal;">Whole Bean Coffee Other</a>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

so what I tried is using this:

$('ul#accordion ul').parent().children(":first").css('font-weight','bold')

I'm trying to get the nested ul's parent and make it bold, but what I get instead is all li and the links they contain become bold.

For some reason if I try to set the bottom border attribute it works as expected:

$('ul#accordion ul').parent().children(":first").css('border-bottom','1px solid green')

Any ideas on what I'm missing here will be greatly appreciated.

The has method is very useful for finding all <li> that contains any <ul>:

$('#accordion li').has('ul')
    .hide(); // Or .css or whatever

$('ul#accordion li').each(function(index) {
    if ($(this).has('ul'))
         $(this).css('font-weight', 'bold');
});

Edited my answer after you gave some more information.

If I get it right, you want to find make every <li> bold that contains a <ul>. So in my code snippet I run through every <li> element within the <ul id="accordion"></ul> and if that specific <li></li> contains a <ul></ul> of any kind, it makes that <li></li> appear bold.

I hope this is what you need, and I'm sure you can modify it yourself to perfectly match your needs.