jQuery - 通过各种dom级别瞄准兄弟元素？

Question

我目前正在研究uni项目，并在我的代码中出现以下问题。我以前通过$（this）.siblings函数找到了我的财产的ID。不过，我最近重新设计了我的项目的属性输出，以便每个元素现在都包含在一个独立的div中（以便于样式化）。然而，这破坏了兄弟姐妹的关系，因为他们不再是彼此的兄弟姐妹。

首先这里是原代码（工作）：

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>'; 

现在，这是我的新代码：

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>'; 

有几件事情都搬来搬去，然而最大的变化是div的。元素的顺序无关紧要。

现在我正在尝试使用lbl-property-id对此代码执行各种任务，但由于对DOM的更改，它们不再正确地查找ID。

这是一个简单的例子：

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

如何定位的property-id正确的，现在我已经改变了要素之间的关系。在这方面，我得到了$(this).parent().parent();。我只是不知道如何相应地调整$(this).siblings以再次获得ID。

对不起，很长的文章。

Answer 1

解决方案结果相当简单。我只需要调整我的目标水平。 （）.parent（）。siblings（“。idRow”）。children（“.lbl-property-id”）。text（）;}。

首先，我将目标父级（）发送给它一个级别，然后你遍历行，直到你到达一行idRow（它包含id）的行，然后在里面你看看idRow的子元素为您提供lbl-property-id。