façon de mettre en œuvre un filtre personnalisé jquery (sélection basée sur la classe du parent)?

Question

Je veux sélectionner tous les textarea qui ne pas ont une DIV avec la classe rouge parmi ses parents faire quelque chose à chacun, puis faire quelque chose d'autre avec le reste de textareas sur la page. En d'autres termes, sélectionnez un ensemble d'éléments, ne travaillez que sur certains d'entre eux, puis faites autre chose avec le reste.

Je sais que je peux faire quelque chose comme ci-dessous, mais y a-t-il une façon moins maladroite de le faire?

$('textarea').filter(function() { 
    return $(this).parents("div.red").length > 0; 
}).css('border','1px solid red').end().filter(function() { 
    return $(this).parents("div.red").length == 0; 
}).css('border','1px solid green'); 

Merci!

Answer 1

Quel est le problème avec cette façon? jQuery est puissant, mais il y a quelque chose à dire pour garder le code propre et lisible et ne pas essayer d'être trop intelligent.

$('textarea').each(function() { 
    if ($(this).parent('div.red').length > 0) { 
    $(this).css('border', 'solid 1px red'); 
    } else { 
    $(this).css('border', 'solid 1px green'); 
    } 
} 

Answer 2

Je ne sais pas si c'est mieux, mais vous pouvez essayer.

$('textarea').each(function() { 
    var borderColor = $(this).parents('div.red').length > 0 ? 'red' : 'green'; 
    $(this).css('border', '1px solid ' + borderColor); 
}); 

Answer 3

peut-être pas la plus efficace, mais assez intuitif est

$('textarea').css('border', '1px solid green'); 
$('div.red textarea').css('border', '1px solid red'); 

bien que quelque chose comme cela peut appartenir plus css si vous essayez de l'appliquer à tous les textarea à tout moment:

textarea { 
    border: 1px solid green; 
} 

div.red textarea { 
    border: 1px solid red; 
} 

Edit:

Comme Paolo Bergantino mentionne, si vous voulez faire Someth ing plus complexe d'une commande sur les css textareas vous pouvez utiliser

var redAreas = $('div.red textarea'); 
var otherAreas = $('textarea').not(redAreas); 

Answer 4

$("textarea").not("div.Red textarea"); /* textareas which do not have a div with class Red among its parents */ 
$("div.Red textarea"); /* textareas which have a div with class Red amoung its parents */ 

Answer 5

Quel est le problème avec juste en utilisant le CSS?

textarea 
{ 
    border: 1px solid green; 
} 

div.red textarea 
{ 
    border: 1px solid red; 
}