JQuery siblings.data() 没有 return 正确的值

Question

我有一个 Html 喜欢 :

<div class="ajouterContainer" id="ajouterContainer1">
    <div class="ajouter ajoutersaved" id="ajouter1" data-no="1" style='background-image: url(..."); background-color: rgb(255, 0, 0);' >
        <div class="pieceModifierContainer"></div>
        <a onclick="return false;" href="#">
            <label>INCLUSION</label>
        </a>
        <span class="pieceFileName">INC-00001_41-H.png</span>
    </div>
    <span class="submenuOpener opened" id="smo1" style="background-color: rgb(255, 0, 0);">▼<input type="hidden"></span>
</div>

我尝试通过 :

在 ajouterContainer div 的点击事件中获取 ajouter1 的 data-no 属性

$(".ajouterContainer").on("click", function(event) {
    var itemID = $(event.target).attr('id');
    var itemNumber = itemID.substring(itemID.length - 1);
    var idToFind = "#smo" + itemNumber;
    var openerItem = $(event.target).find(idToFind);
    if (!openerItem.length) {
        $(event.target).css("background-color", "red");
        return;
    }
    //the data-no attribute is 3 by default. I change it using jQuery to 1.
    var dataNo = openerItem.siblings().data("no"); //returns 3
    $(openerItem).prev().attr("data-no"); // returns 1 (the correct value).

});

openerItem.siblings().data("no"); 有什么问题吗？在通过代码更改它之前，它可以工作。

Answer 1

您应该使用 $(openerItem).siblings('[data-no]').data('no')

过滤您的兄弟姐妹

编辑：

问题不在于 siblings() 方法；这是因为您使用的 event.target 接受的是实际点击的子元素，而不是 ajouterContainer1。我已将其替换为 this，它应该适合您。希望对您有所帮助：

$(".ajouterContainer").on("click", function(event) {
    var itemID = this.id;
    var itemNumber = itemID.substring(itemID.length - 1);
    var idToFind = "#smo" + itemNumber;
    var openerItem = $(this).find(idToFind);
    if (!openerItem.length) {
        $(event.target).css("background-color", "red");
        return;
    }
    //the data-no attribute is 3 by default. I change it using jQuery to 1.
    var dataNo = openerItem.siblings().data("no"); //returns 3
    console.log(dataNo);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ajouterContainer" id="ajouterContainer1">
    <div class="ajouter ajoutersaved" id="ajouter1" data-no="1" style='background-image: url(..."); background-color: rgb(255, 0, 0);' >
        <div class="pieceModifierContainer"></div>
        <a onclick="return false;" href="#">
            <label>INCLUSION</label>
        </a>
        <span class="pieceFileName">INC-00001_41-H.png</span>
    </div>
    <span class="submenuOpener opened" id="smo1" style="background-color: rgb(255, 0, 0);">▼<input type="hidden"></span>
</div>

JQuery siblings.data() 没有 return 正确的值

JQuery siblings.data() doesn't return the correct value

html

javascript

jquery

asp.net-mvc-4