Object toevoegen
Ik heb deze code:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
<ul>
<li>
<a href="/login">Inloggen</a>
</li>
<li>
<a href="/account/register">Registreren</a>
</li>
<li>
<a href="/account/forget">Wachtwoord vergeten</a>
</li>
</ul>
<li>
<a href="/login">Inloggen</a>
</li>
<li>
<a href="/account/register">Registreren</a>
</li>
<li>
<a href="/account/forget">Wachtwoord vergeten</a>
</li>
</ul>
Nadat de jQuery is uitgevoerd, is de code veranderd in dit:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<ul>
<li>
<a href="/login">Inloggen</a>
</li>
<li>
<a class="slash">/</a>
</li>
<li>
<a href="/account/register">Registreren</a>
</li>
<li>
<a class="slash">/</a>
</li>
<li>
<a href="/account/forget">Wachtwoord vergeten</a>
</li>
</ul>
<li>
<a href="/login">Inloggen</a>
</li>
<li>
<a class="slash">/</a>
</li>
<li>
<a href="/account/register">Registreren</a>
</li>
<li>
<a class="slash">/</a>
</li>
<li>
<a href="/account/forget">Wachtwoord vergeten</a>
</li>
</ul>
Gewijzigd op 22/10/2011 20:11:51 door Allard Jansen
Gesponsorde koppelingen:
@Aar:
Ik heb geprobeerd om met jQuery er een li element achter te zetten. Dat lukt, alleen staat hij er dan overal achter. Ik wil dat het bij de laatste niet gebeurd. Ik had dit:
Code (php)
1
2
3
2
3
$('#navigation li').has('ul').each(function(){
$('ul > li', this).after('<li><a class="slash">/</a></li>');
});
$('ul > li', this).after('<li><a class="slash">/</a></li>');
});
Gewijzigd op 22/10/2011 20:10:59 door Allard Jansen
Het kan toch ook met PHP? Een counter bijhouden, en wanneer de counter even groot is als de count van de items, dan geen slash toevoegen.
Code (php)
1
2
3
2
3
ul > li:not(:last-child):after {
content: '/';
}
content: '/';
}
Demo: http://jsfiddle.net/Y3YZu/
Mocht je me niet vertrouwen, dan kan je diezelfde selector gebruiken in jQuery, en achter alle elementen die worden gematcht alsnog je li-element met alleen een slash toevoegen. :)
Gewijzigd op 22/10/2011 21:11:49 door Jelmer rrrr
Code (php)
1
2
3
4
5
6
2
3
4
5
6
li:after {
content: '/';
}
li:last-child:after {
content: '';
}
content: '/';
}
li:last-child:after {
content: '';
}
Gewijzigd op 22/10/2011 21:21:18 door Jelmer rrrr
Maar goed, de keuze is aan de topic starter.
Niels Kieviet op 22/10/2011 20:25:52:
Waarom uberhaupt met JQuery?
Het kan toch ook met PHP? Een counter bijhouden, en wanneer de counter even groot is als de count van de items, dan geen slash toevoegen.
Het kan toch ook met PHP? Een counter bijhouden, en wanneer de counter even groot is als de count van de items, dan geen slash toevoegen.
Het kan helaas niet met PHP. Maar het bovenstaande moet toch ook met jQuery kunnen? Want met CSS is ook geen optie. Een heel aantal browsers ondersteunen dat niet. En dan krijg je gewoon hetzelfde resultaat als bij mijn jQuery code. Heeft iemand misschien een oplossing?
Code (php)
1
2
3
2
3
$('#navigation li').has('ul').each(function(){
$('ul > li:not(:last-child)', $(this)).after('<li><a class="slash">/</a></li>');
});
$('ul > li:not(:last-child)', $(this)).after('<li><a class="slash">/</a></li>');
});
Deze zal wel overal werken, omdat deze selectors gemaakt zijn met de Sizzle JavaScript Selector Engine. En JavaScript werkt in elk browser.
