[jQuery] $li:last selecteert een element ipv allemaal*

[josjos]

Mijn doel:
Het laatste item van elk submenu geen BG-image.
Omdat niet alle browser li.last in CSS accepteren en ik de source van het CSS niet wil wijzigen, wil ik mijn doel bereiken met Jquery.
Probleem:
JQuery pakt alleen het laatste submenu ipv alle submenu's
Weet iemand manier om dit op te lossen? (een each loop o.i.d)?

JavaScript:

<script>
$(function(){
    $('ul#sidebarmenu1 ul li:last a').css('background-image', 'none'); 
   });

</script>

HTML:

<div class="sidebarmenu">
<ul class="menu" id="sidebarmenu1">
    <li class="parent item65"><a href="#"><span>Link 1</span></a>
        <ul>
            <li class="item73"><a href="/link/"><span>Sublink 1</span></a></li>
           <li class="item77"><a href="/link/"><span>Sublink 2(*****)</span></a></li>
        </ul>
    </li>
    <li class="item66"><a href="/link/" target="_blank"><span>Link 2</span></a></li>                
    <li class="parent item65"><a href="#"><span>Link 3</span></a>
        <ul>
            <li class="item73"><a href="/link/"><span>Sublink 1</span></a></li>
            <li class="item74"><a href="/link/"><span>Sublink 2(*****)</span></a></li>       </ul>
    </li>
</ul>
</div>

Cascading Stylesheet:

.sidebarmenu ul li ul li a, .sidebarmenu ul li ul li a:link, .sidebarmenu ul li ul li a:visited, .sidebarmenu ul li ul li a:active{
    background-image:url(/submenu_red.gif);
}

[BtM909]

Welke li's wil je nou bereiken aangezien last alleen 't laatste element returned (zoals beschreven in de docs)?

[ Voor 56% gewijzigd door BtM909 op 02-06-2009 14:51 ]

[josjos]

BtM909 schreef op dinsdag 02 juni 2009 @ 14:49:
Welke li's wil je nou bereiken?

De laatste LI van de submenu's, nu aangegeven met (*****).

[ Voor 22% gewijzigd door josjos op 02-06-2009 14:52 ]

[Sjaak_Trekhaak]

Ik heb niet de mogelijkheid (lees: tijd) te testen op dit moment; maar wellicht kan de .each functie helpen:

code:

$(function(){
    $('ul#sidebarmenu1').each('ul li:last a').css('background-image', 'none'); 
   });

[ Voor 5% gewijzigd door Sjaak_Trekhaak op 02-06-2009 14:58 ]

[Verwijderd]

Bij mij doet hij het gewoon:

HTML:

<ul id="sidebarmenu1">
    <li><a href="#"><span>Link 1</span></a>
        <ul>
            <li><a href="/link/"><span>Sublink 1</span></a></li>
           <li><a href="/link/"><span>Sublink 2(*****)</span></a></li>
        </ul>
    </li>
    <li><a href="/link/" target="_blank"><span>Link 2</span></a></li>                
    <li><a href="#"><span>Link 3</span></a>
        <ul>
            <li><a href="/link/"><span>Sublink 1</span></a></li>
            <li><a href="/link/"><span>Sublink 2(*****)</span></a></li>       
        </ul>
    </li>
</ul>

<script type="text/javascript">       
    $(document).ready(function() {
        $('ul#sidebarmenu1 ul li:last a').css('background-color', 'yellow'); 
    });
</script>

Maakt netjes de **** geel.

[BtM909]

Verwijderd schreef op dinsdag 02 juni 2009 @ 14:59:
Bij mij doet hij het gewoon:
Maakt netjes de **** geel.

Pakt alleen de allerlaatste entry Zie hieronder

rippance schreef op dinsdag 02 juni 2009 @ 14:57:
Ik heb niet de mogelijkheid (lees: tijd) te testen op dit moment; maar wellicht kan de .each functie helpen:

code:

$(function(){
    $('ul#sidebarmenu1').each('ul li:last a').css('background-image', 'none'); 
   });

Werkt niet, want hij pakt de laatste uit z'n array. Je kan beter naar last-child kijken, waardoor je selector wordt:

JavaScript:

  $(document).ready(function(){
    $("ul li ul li:last-child a span").css("border", "3px solid blue");
  });

^ ^ dit werkt dus zoals TS wilt (voor 't geval 't niet opvalt )

[ Voor 19% gewijzigd door BtM909 op 02-06-2009 15:08 ]

[josjos]

Verwijderd schreef op dinsdag 02 juni 2009 @ 14:59:
Bij mij doet hij het gewoon:

HTML:

<ul id="sidebarmenu1">
    <li><a href="#"><span>Link 1</span></a>
        <ul>
            <li><a href="/link/"><span>Sublink 1</span></a></li>
           <li><a href="/link/"><span>Sublink 2(*****)</span></a></li>
        </ul>
    </li>
    <li><a href="/link/" target="_blank"><span>Link 2</span></a></li>                
    <li><a href="#"><span>Link 3</span></a>
        <ul>
            <li><a href="/link/"><span>Sublink 1</span></a></li>
            <li><a href="/link/"><span>Sublink 2(*****)</span></a></li>       
        </ul>
    </li>
</ul>

<script type="text/javascript">       
    $(document).ready(function() {
        $('ul#sidebarmenu1 ul li:last a').css('background-color', 'yellow'); 
    });
</script>

Maakt netjes de **** geel.

Deze code geeft:

[josjos]

BtM909 schreef op dinsdag 02 juni 2009 @ 15:05:
[...]


Pakt alleen de allerlaatste entry Zie hieronder


[...]

Werkt niet, want hij pakt de laatste uit z'n array. Je kan beter naar last-child kijken, waardoor je selector wordt:

JavaScript:

  $(document).ready(function(){
    $("ul li ul li:last-child a span").css("border", "3px solid blue");
  });

^ ^ dit werkt dus zoals TS wilt (voor 't geval 't niet opvalt )

TOP!! Dank je, 2 uur naar zitten zoeken ^ ^, mission accomplished!!
Conclusie: last moet last-child worden (klinkt logisch):

JavaScript:

$(document).ready(function(){
  $("ul#sidebarmenu1 li ul li:last-child a").css('background-image', 'none');  
});

[Verwijderd]

josjos schreef op dinsdag 02 juni 2009 @ 15:06:
Deze code geeft:

Bij mij geeft 'ie wat je wil in Firefox3, IE8 en Safari4 op XP.

[BtM909]

Verwijderd schreef op dinsdag 02 juni 2009 @ 16:04:
[...]

Bij mij geeft 'ie wat je wil in Firefox3, IE8 en Safari4 op XP.

Gebruik je de hosted latest release of een gedownloadde versie (en zo ja, welke versie)

[Bosmonster]

Verwijderd schreef op dinsdag 02 juni 2009 @ 16:04:
[...]

Bij mij geeft 'ie wat je wil in Firefox3, IE8 en Safari4 op XP.

Das wel knap. Heb het geprobeerd met aantal browsers en zowel jQuery 1.2.6 en 1.3.2 en beiden geven NIET wat de TS wil

[Verwijderd]

Bosmonster schreef op dinsdag 02 juni 2009 @ 18:18:
Das wel knap. Heb het geprobeerd met aantal browsers en zowel jQuery 1.2.6 en 1.3.2 en beiden geven NIET wat de TS wil

Hmm, goed punt. Ik testte met 1.3b1.