décembre 2012 – devfrontend.info

[jQuery] Attribuer des identifiants uniques à une série d’éléments et les utiliser pour leur ajouter dynamiquement des contenus spécifiques avec attr, split et appendTo

18/12/2012 / admin

Simulation : http://jsfiddle.net/frontenddeveloper/7GV2G/51/

On commence par attribuer un id unique à chaque élément cible en incrémentant une valeur numérique :

var TARGET_ID = -1;
jQuery('.target').each(function() {
    TARGET_ID++;
    jQuery(this).attr('id', 'target-'+TARGET_ID);
});

var TARGET_ID = -1;

jQuery('.target').each(function() {

TARGET_ID++;

jQuery(this).attr('id', 'target-'+TARGET_ID);

});

Pour chaque élément qu’on souhaite déplacer, on récupère la valeur numérique contenue dans l’identifiant de manière à pouvoir le lier à l’élément cible correspondant :

jQuery('.content').each(function(i,n){
    id = jQuery(n).attr("id").split('-')[1];
    jQuery(n).appendTo('#target-' + id);
});

jQuery('.content').each(function(i,n){

id = jQuery(n).attr("id").split('-')[1];

jQuery(n).appendTo('#target-' + id);

});

[jQuery] Grouper des éléments avec les fonctions lenght et slice

14/12/2012 / admin

Grouper des éléments avec jQuery en utilisant la fonction de base lenght et la fonction de parcours slice.

Simulation : http://jsfiddle.net/frontenddeveloper/6wXef/1/

var items = jQuery('.single-item');
var blockCount = 2;

for (var i = 0; i < items.length; i+= blockCount) {
    var slice = items.slice(i,i + blockCount);      
    slice.wrapAll('<div class="item-pack"></div>');
}

var items = jQuery('.single-item');

var blockCount = 2;

for (var i = 0; i < items.length; i+= blockCount) {

var slice = items.slice(i,i + blockCount);

slice.wrapAll('<div class="item-pack"></div>');

}

[jQuery] Rendre, à partir d’un lien qu’il contient, un bloc entièrement cliquable

13/12/2012 / admin

Simulation : http://jsfiddle.net/frontenddeveloper/QG5qr/4/

jQuery(document).ready(function(){
    jQuery('.box').click(function(){
        window.location=jQuery(this).find("a").attr("href");
        return false;
    });
});

jQuery(document).ready(function(){

jQuery('.box').click(function(){

window.location=jQuery(this).find("a").attr("href");

return false;

});

[jQuery] Sélectionner l’intégralité d’une colonne de tableau

12/12/2012 / admin

Simulation : http://jsfiddle.net/frontenddeveloper/FZrp7/

jQuery(document).ready(function(){
		// on applique une classe aux colonnes sélectionnées pour les mettre en avant visuellement
		jQuery('table input').click(function (){
			var GET_COLUMN_INDEX = jQuery(this).closest('td').prevAll().length;

	        jQuery('input').closest('table').find('th:nth-child(' + (GET_COLUMN_INDEX + 1) + '), td:nth-child(' + (GET_COLUMN_INDEX + 1) + ')').toggleClass('selected');
	        //alert( ' column # ' + ( GET_COLUMN_INDEX ) );
		});
	});

jQuery(document).ready(function(){

// on applique une classe aux colonnes sélectionnées pour les mettre en avant visuellement

jQuery('table input').click(function (){

var GET_COLUMN_INDEX = jQuery(this).closest('td').prevAll().length;

jQuery('input').closest('table').find('th:nth-child(' + (GET_COLUMN_INDEX + 1) + '), td:nth-child(' + (GET_COLUMN_INDEX + 1) + ')').toggleClass('selected');

//alert( ' column # ' + ( GET_COLUMN_INDEX ) );

});

Articles récents

Catégories

Archives

Méta

Mois : décembre 2012

[jQuery] Attribuer des identifiants uniques à une série d’éléments et les utiliser pour leur ajouter dynamiquement des contenus spécifiques avec attr, split et appendTo

[jQuery] Grouper des éléments avec les fonctions lenght et slice

[jQuery] Rendre, à partir d’un lien qu’il contient, un bloc entièrement cliquable

[jQuery] Sélectionner l’intégralité d’une colonne de tableau