Auswahl von Elementen, die nicht unter einem bestimmten Element liegen

Question

Ich habe Probleme mit einem CSS-Selektor. Ich brauche eine CSS-Regel, die alle Eingabefelder zurückgibt, aber die unter einem bestimmten.

Dies ist ein HTML-Code Beispiel:

<div id="container"> 
    <div> 
     <input name="apple"> 
     <div class="sub"> 
      <input name="banana"> 
      <input name="grapefruit"> 
     </div> 
    </div> 
</div> 

Die gesprochene Regel lautet:

Gib mir alle Eingabefelder unter #container aber nicht die unter einem Element mit dem Klassennamen "sub".

Der HTML-Code ist dynamisch, daher kann ich mich nicht auf einfache Kindselektoren wie > verlassen. Ich habe schon mit dem :not() Selektor herumgespielt, hatte aber bisher kein Glück.

Hinweis: Ich verwende jQuery für die Elementauswahl.

Answer 1

Sie sollten etwas wie das betrachten;

$('input:not(.sub input)') 

:not Der Selektor wird ohne Berücksichtigung der Eingabeelemente, die unter Unter sind. Sie könnten auch etwas wie dieses verwenden, das klarer sein könnte:

$('input').not($('.sub').find('*')); 

Answer 2

$("#container input").filter(
        function(){ 
           return $(this).parent().hasClass("sub")==false 
           } 
          ).css('background-color','red'); //make those elements - RED