实现jquery自定义过滤器的简单方法(根据父类选择)?

这条路怎么了?jquery是强大的,但是有一些话要说,以保持代码的干净和可读性,而不是试图太聪明。

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

也许不是最有效的,但相当直观的是

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

尽管如此,如果您一直试图将其应用于每个文本区域,那么在CSS中可能会有更多类似的内容:

textarea {
    border: 1px solid green;
}

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

编辑:

正如paolo bergantino提到的,如果您想在文本区域上执行比一个css命令更复杂的操作,可以使用

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

$("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 */

我不知道是否更好,但你可以试试。

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

仅仅使用CSS有什么问题?

textarea 
{
    border: 1px solid green;
}

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