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

解决方案结果相当简单。我只需要调整我的目标水平。

var sIdToDelete = $（this）.parent（）。siblings（“。idRow”）。children（“。lbl-property-id”）。text（）;

首先我的目标parent（）将它发送到一个级别，然后你遍历行直到你到达一个idRow类（包含id）的行然后在里面你看到idRow的子项给出你是lbl-property-id。

jQuery - 通过各种dom级别定位兄弟元素？

1 个答案: