:before content CSS en jQuery

**okoweb** · 28/02/2012, 18h39

Bonsoir à tous,

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**SpaceFrog** · 28/02/2012, 19h00

prev() ?

**okoweb** · 28/02/2012, 19h05

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...

**Bovino** · 28/02/2012, 19h10

.prepend()

**SpaceFrog** · 28/02/2012, 19h14

before() ?

**okoweb** · 29/02/2012, 08h36

Envoyé par Bovino

.prepend()

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Merci

!

**SpaceFrog** · 29/02/2012, 09h39

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

ou

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

**Bovino** · 29/02/2012, 10h02

.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 :

Sélectionner tout - Visualiser dans une fenêtre à part

$('#foo:first-child')

correspond à la div #foo, pas au h3

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$('#foo :first-child')

Ensuite, dans la seconde ligne

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$('#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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

:before content CSS en jQuery

jQuery

Discussions similaires

Partager

Partager