11548 sujets

JavaScript, DOM et API Web HTML5

[Résolu] JQuery - sélectionner tous les X éléments

Bonjour,

En jQuery, je cherche à sélectionner tous les 4 éléments d'une liste ou enfant d'une div. Concrètement, dans une liste de 16 éléments, je cherche à sélectionner le 4e, 8e, 12e et 16 afin d'y ajouter une div après.

Je sais comment sélectionner les paires, impaires, les éléments à partir d'un éléments, les premiers mais pas tous les Xe enfants d'un parent.

Merci à ceux qui répondront.
Bonsoir à toutes et à tous,

c'est quelque chose dans ce genre que tu recherches !
Je fais une insertion d'une nouvelle balise <li> après toutes les quatre balises <li> existantes.
J'ai mise cette nouvelle balise en rouge pour bien la visualiser.

Voici le code HTML :
<!doctype html>
<html>
<head>
<!-- ==== -->
<!-- Meta -->
<!-- ==== -->

<meta http-equiv="Content-Type"        content="text/html; charset=ISO-8859-1" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type"  content="text/css" />

<title></title>

<!-- ========== -->
<!-- JavaScript -->
<!-- ========== -->

<script type="text/javascript">
window.onload = function ()
{
	var node = document.getElementById("bloc").getElementsByTagName("li");
	var tabl = new Array("one", "two", "three", "four");

	for (var i=node.length - 1, j=3; i>=0; i--)
		if ((i%4) == 3)
		{
			var text = document.createTextNode(tabl[j--]);
			var list = document.createElement("LI");
			list.style.backgroundColor = "red";
			list.appendChild(text);
			node[ i ].appendChild(list);
		}
}</script>
</head>

<body>
	<div id="bloc">
		<ul>
			<li>un</li>
			<li>deux</li>
			<li>trois</li>
			<li>quatre</li>
			<li>cinq</li>
			<li>six</li>
			<li>sept</li>
			<li>huit</li>
			<li>neuf</li>
			<li>dix</li>
			<li>onze</li>
			<li>douze</li>
			<li>treize</li>
			<li>quatorze</li>
			<li>quinze</li>
			<li>seize</li>
		</ul>
	</div>
</body>
</html>


@+
Modifié par Artemus24 (06 May 2012 - 01:01)
Merci à tous les deux pour votre réponse si rapide et plus particulièrement à Artemus pour avoir pris le temps d'écrire un si long script. Je vais commencer par essayer la première solution proposée qui est directement en jQuery.

Je ne manquerai pas de revenir cocher la cache "résolu" si cette proposition résolvait mon problème.
Modifié par Laurie-Anne (06 May 2012 - 14:48)
J'ai finalement utilisé cette ligne de code :

$(".bloc:nth-child(4n+1)").after('<div class="separation"></div>');


Vous pouvez voir le résultat sur cette page :
http://jmndesign.be/webdesign/index.html

une ligne de séparation s'insère correctement après 4 blocs.

Merci à tous les deux
Modifié par Laurie-Anne (06 May 2012 - 14:48)
Sujet clos
Aller à