neat way to implement a jquery custom filter (selecting based on parent's class)?

Hello,

I want to select every textarea that does not have a DIV with class red among its parents, do something to each, and then do something else with the rest of textareas on the page. In other words, select a set of elements, work on only some of them, and then do something else with the rest.

I know I can do something like below, but is there a less clumsy way of doing it?

$('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');

Thanks!

From stackoverflow

• I don't know if its any better, but you could try.

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

• What's wrong with this way? jQuery is powerful, but there is something to be said for keeping code clean and readable and not trying to be too clever.

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

  dalbaeb : Nothing, really. I guess I was so entangled in the jQuery way of doing things and "trying to be clever", that I forgot that what's happening behind the scenes is essentially this..

• maybe not the most efficient, but fairly intuitive is

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

  although something like this may belong more in css if you are trying to apply it to every textarea at all times:

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

  Edit:

  As Paolo Bergantino mentions, if you want to do something more complex than one css command on the textareas you can use

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

  bendewey : I think your green/red logic might be backwards from the OPs

  cobbal : so it was, good catch

  Matt : Very simple, should have been obvious from the start..

  Paolo Bergantino : This works because of the way CSS cascades, but I am not sure if this answers the OP's question - I was under the impression the CSS was just an example and he wants to do something else to the two different set of elements.

  dalbaeb : Yes, my question is about having a subset of a set of elements, and then being able to get just the remaining elements of that very same set (subset2 = set - subset). Sorry if the wording is not sufficiently clear.

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

• What is wrong with just using CSS?

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