erhalten spezifisch Eltern in jQuery

Question

Ich habe folgende HTML und ich brauche die erst div Eltern des Objekt (Kollaps)

zu erhalten, wenn dieser Elternteil eine Klasse von (ZeroClass) hat .. ich die nächste haben will div Eltern ..

<div> 
    <div id = "DeadCode"> 
    <div class = "ZeroClass"> 
     <table class = "zeroTable"> 
     <...tableData...> 
     </table> 
    </div> 
    </div> 
</div> 

die jQuery-Funktion:

function ResizeGrid(){ 
    var collapse = $(".zeroTable").parent(); 

    if ($(collapse).hasClass("ZeroClass")) { 
     collapse = $(collapse).parents($("div")); 
    } 
} 

Alles geht gut, aber wenn durch die if-Anweisung vorbei, macht es Null Collapse .. irgendwelche Ideen?

Answer 1

Verwenden parent für den ersten Schritt und closest für das zweite:

function ResizeGrid() { 
    var $collapse = $(".zeroTable").parent(); 

    if ($collapse.hasClass("ZeroClass")) { 
     $collapse = $collapse.closest("div"); 
    } 
} 

Ihr Problem in dieser Reihe liegt:

collapse = $(collapse).parents($("div")); 

Sie zuerst alle div-Elemente $("div") holen und dann $(collapse).parents() sagen übereinstimmen einer von ihnen.

Mein Code:

$collapse = $collapse.closest("div"); 

Tells jQuery den nächsten übergeordneten div zu finden.

Es empfiehlt sich, jQuery-Variablen mit $ voranzuzfügen, um zu verfolgen, welche vars jQuery-Objekte sind und welche reguläre DOM-Knoten sind.

Answer 2

arbeitete gerade auf Ihrem HTML und Script Sie gegeben haben und die unten Demo

http://jsfiddle.net/ffRN7/37/ prüfen folgende Sache mit ihm gefunden

Demo1 zum nächsten div AddClass wird

Modified Linie für die nächste div finden in folgenden Skript ...

$(collapse).closest("div").addClass("divclass"); 

http://jsfiddle.net/ffRN7/38/

Demo2 fügt Klasse an die Eltern, die div Script bei Geige keine ID oder Klasse nicht zugänglich ist:

function ResizeGrid(){ 

     var collapse = $(".zeroTable").parent(); 

    if ($(collapse).hasClass("ZeroClass")){ 
      $(collapse).parents("div").addClass("divclass"); 

     } 
    } 

     $("a").bind("click", ResizeGrid); 

CSS

.zeroTable td {border:1px solid black} 
.ZeroClass {border:1px solid green; width:90%; height:50px; margin:5px;} 

#DeadCode {border:1px solid blue; width:95%; height:100px; } 

.divclass{height:200px; padding:5px; background-color:yellow;}