:before content CSS en jQuery

Version imprimable

Bonsoir à tous,

Code:

1
2
3
4
5
6
7
8
9
 
//CSS
#main .col article h1:before  {
	content: url(../images/item-pointer.gif)" ";
}
 
#footer_nav li:before, #tools ul.rssfeeds li:before  {
	content: url(../images/item-pointer2.gif)" ";
}

Comment reproduire ce code CSS en JS en utilisant jQuery ?

Merci d'avance

28/02/2012, 19h00
SpaceFrog

prev() ?
28/02/2012, 19h05
okoweb

Citation:

Envoyé par SpaceFrog

prev() ?

Je souhaite insérer à l'intérieur tout au début d'une balise ou d'un élément ciblé avec jquery.

Merci d'avance...
28/02/2012, 19h10
Bovino

.prepend()
28/02/2012, 19h14
SpaceFrog

before() ?

Citation:

Envoyé par Bovino

.prepend()

Code:

1
2
3
4
5
 
//JS
	$("#main .col article h1").prepend('<img src="templates/images/item-pointer.gif" alt="puce" />&nbsp;');
	$("#footer_nav li").prepend('<img src="templates/images/item-pointer2.gif" alt="puce" />&nbsp;');
	$("#tools ul.rssfeeds li").prepend('<img src="templates/images/item-pointer2.gif" alt="puce" />&nbsp;');

Ce qui me permet de contourner les old IE qui ne comprennent pas

Code:

1
2
3
4
5
 
//CSS
:before  {
	content: url(../images/item-pointer2.gif)" ";
}

Merci :ccool: !

Beef si tu passes par là .. ou Daniel ;)
Quelle est la différence entre prepend() et before() et dans quel cas faut il les utiliser ?
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <script type="text/javascript"> $(function(){ $('#foo:first-child').prepend($('<h3/>').html("Maintenant c'est moi le premier") ) $('#foo:first-child').before($('<h3/>').html("Ben non c'est moi ") ) }); </script> </head> <body> <div id="foo"> <h3>Premier node</h3> </div> </body> </html>
ha à priori il y a une différence :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 <script type="text/javascript"> $(function(){ $('.foo h3:eq(0)').prepend($('<h3/>').html("Maintenant c'est moi le premier") ) $('.foo h3:eq(0)').before($('<h3/>').html("Ben non c'est moi ") ) }); </script> <style type="text/css"> h3 { border: solid 2px red;} </style> </head> <body> <div class="foo"> <h3>Premier node</h3> </div> </body> </html>
le prepend insère dans le premier h3, le before insère avant le premier h3

Et au passage mon erreur précédente vient du fait que
#foo:first-child != #foo :first-child'

Une dernière chose m'échappe
Dans ce dernier code il m'insère deux fois le dernier h3 ..
une fois en prepend (a l'interieur du .foo)
une fois en before (avant le .foo)
???

Ha oui !

Code:

$('.foo :first-child:eq(0)')

ou

Code:

$('.foo> :first-child')

sinon il fait un before sur tous les premier noeuds des enfants de .foo

.before() ajoute le contenu avant la balise en référence alors que .prepend() ajoute le contenu comme premier enfant de la balise en référence.

Mais dans ton exemple, il y a quelques erreurs qui empêchent de bien comprendre :

Code:

$('#foo:first-child')

correspond à la div #foo, pas au h3 ;)

Code:

$('#foo :first-child')

Ensuite, dans la seconde ligne

Code:

$('#foo :first-child')

correspond désormais à deux éléments puisque tu as ajouté un h3 dans le premier h3, tu as donc deux éléments dans la div #foo qui correspondent à un :first-child ;)

L'xemple suivant sera peut-être plus éloquent :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 <!doctype html> <html> <head> <meta charset="utf-8" /> <title>...</title> <script src="http://code.jquery.com/jquery-latest.js"></script><script type="text/javascript"></script> <script> $(function(){ var $foo = $('#foo :first-child'); $foo.prepend($('<h3/>').html("Maintenant c'est moi le premier")); $foo.before($('<h3/>').html("Ben non c'est moi ")); alert($('#foo').html()); }); </script> </head> <body> <div id="foo"> <h3>Premier node</h3> </div> </body> </html>