jQuery - Ausrichtung Geschwisterelemente durch verschiedene Dom Ebenen?

Question

Ich arbeite derzeit an einem Uni-Projekt und habe das folgende Problem in meinem Code. Ich habe zuvor die ID meiner Eigenschaft über die Funktion $ (this) .siblings gefunden. Allerdings habe ich kürzlich die Eigenschaftsausgabe meines Projekts neu gestaltet, so dass jedes Element jetzt in ein unabhängiges div eingefügt wird (um das Styling zu vereinfachen). Dies bricht jedoch die Beziehung der Geschwister, da sie keine Geschwister mehr sind.

Zuerst hier aus dem Original-Code ist (was gearbeitet):

var sProperty = ' <div class="lbl-property">\ 
         <label>id:</label>\ 
         <div class="lbl-property-id col">{{id}}</div>\ 
         <label>Address:</label>\ 
         <div class="lbl-property-address col">{{address}}</div>\ 
         <label>Type:</label>\ 
         <div class="lbl-property-type col">{{type}}</div>\ 
         <label>Price:</label>\ 
         <div class="lbl-property-price col">{{price}}</div>\ 
         <div class="lbl-propImage"><img class="propImg" src="img/{{images}}"></div>\ 
         <div class="lbl-propImage"><img class="propImg" src="img/{{images}}"></div>\ 
         <div class="lbl-propImage"><img class="propImg" src="img/{{images}}"></div>\ 
         <div data-go-to="wdw-prop-map" class="fa fa-map-marker fa-fw btn-get-map link"></div>\ 
        </div>'; 

Nun ist dies mein neuer Code:

var sProperty = '\<div class="propContainer">\ 
        <div class="row">\ 
        <h2>Property title (static)</h2>\ 
        </div>\ 
        <div class="PropImg row">\ 
        <div id="headImg" class="lbl-propImage"><img class="propImg" src="img/{{images}}"></div>\ 
        <div class="lbl-propImage"><img class="propImg" src="img/{{images}}"></div>\ 
        <div class="lbl-propImage"><img class="propImg" src="img/{{images}}"></div>\ 
        </div>\ 
        <div class="row">\ 
        <label>id:</label>\ 
        <div class="lbl-property-id col">{{id}}</div>\ 
        </div>\ 
        <div class="row">\ 
        <label>Address:</label>\ 
        <div class="lbl-property-address col">{{address}}</div>\ 
        </div>\ 
        <div class="row">\ 
        <label>Type:</label>\ 
        <div class="lbl-property-type col">{{type}}</div>\ 
        </div>\ 
        <div class="row">\ 
        <label>Price:</label>\ 
        <div class="lbl-property-price col">{{price}}</div>\ 
        </div>\ 
        <div class="row">\ 
        <div class="lbl-property-locLat col hidden">{{locLat}}</div>\ 
        <div class="lbl-property-locLng col hidden">{{LocLng}}</div>\ 
        </div>\ 
        <div class="row">\ 
        <div data-go-to="wdw-prop-map" class="propBtn fa fa-map-marker fa-fw btn-get-map link"></div>\ 
        <div data-go-to="wdw-create-property" class="propBtn fa fa-edit fa-fw link"></div>\ 
        <div class="propBtn fa fa-trash fa-fw btn-delete-property"></div>\ 
        </div>\ 
       </div>'; 

Ein paar Dinge, um bewegt werden, aber die größte Veränderung ist die divs. Die Reihenfolge der Elemente spielt keine Rolle.

Jetzt versuche ich verschiedene Aufgaben an diesem Code mit der lbl-property-id jedoch sie nicht mehr richtig finden die ID wegen der Änderungen an das DOM.

Dies ist ein einfaches Beispiel:

$(document).on("click", ".btn-delete-property", function() { 
    var sIdToDelete = $(this).siblings(".lbl-property-id").text(); 
    console.log(sIdToDelete); 
    var objectParent = $(this).parent().parent(); //This removes from page - two .parents are defined to work up the dom. 

    var sUrl = "api-delete-property.php?id="+sIdToDelete; 
    $.getJSON (sUrl, function (jData) { 
     if (jData.status == "ok") { //ok is returned from the server. 
      console.log("Property deleted from database"); 
      objectParent.remove(); 
     } 
    }) 
}); 

Wie richte ich die property-id jetzt richtig, dass ich die Beziehung zwischen den Elementen verändert haben. Ich habe die $(this).parent().parent();, um ein Niveau in dieser Hinsicht zu springen. Ich kann einfach nicht herausfinden, wie man die $(this).siblings entsprechend anpasst, um noch einmal die ID zu bekommen.

Entschuldigung für die lange Post.

Answer 1

Die Lösung erwies sich als ziemlich einfach. Ich musste nur das Level anpassen, auf das ich ausgerichtet war.

var sIdToDelete = $ (this) .parent(). Geschwister (". IdRow"). Children (". Lbl-Eigenschaft-ID"). Text();

Zuerst target Eltern(), die es eine Ebene sendet, dann gehen Sie durch die Zeilen, bis Sie eine Zeile mit einer Klasse von idRow (die die ID enthält) dann innerhalb, dass Sie auf die Kinder von IDRow, die aussehen gibt Ihnen die Lbl-Eigenschaft-ID.