[英]JQuery siblings.data() doesn't return the correct value
I have a Html like : 我有一个类似的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>
I try to get the data-no attribute of the ajouter1 on click event of ajouterContainer div by : 我尝试通过以下方式获取ajouterContainer div的click事件的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).
});
What is wrong with openerItem.siblings().data("no");
openerItem.siblings().data("no");
怎么了openerItem.siblings().data("no");
? ? Before changing it by code, it works.
在通过代码更改它之前,它可以工作。
You should filter your siblings using $(openerItem).siblings('[data-no]').data('no')
您应该使用
$(openerItem).siblings('[data-no]').data('no')
过滤兄弟姐妹
EDIT: 编辑:
The problem isn't the siblings() method; 问题不在于siblings()方法。 it's because you're using event.target that takes the child element which is actually clicked and not the
ajouterContainer1
. 这是因为您正在使用event.target,它接受实际上被单击的子元素,而不是
ajouterContainer1
。 I've replaced it with this
which should work for you. 我已经取代了它
this
应该为你工作。 I hope this helps: 我希望这有帮助:
$(".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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.