jQuery-获取最接近的类的属性值
[英]Jquery - Get attribute value of closest class
问题描述
I am trying to grab the attribute value from the closest element with the class specified but keep getting back undefined. 
我正在尝试从具有指定类的最近元素中获取属性值，但始终保持未定义状态。
Below is my HTML and my code, I am not too sure what am doing wrong to get back undefined. 以下是我的HTML和我的代码，我不太确定怎么做会导致未定义返回。
HTML HTML
<body>
<form action="/update" id="formwrite">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title va-middle">Account Settings
<img src='../images/colopen.svg' data-swap='../images/coll.svg' class="panel-icon collapse-icon" role="button" data-toggle="collapse" data-parent="#accordion" href="#collaspeOne" aria-expanded="true" aria-controls="collaspeOne">
</h4>
</div>
<div id="collaspeOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-default">
<div class="row fieldpos">
<fieldset class="form-group textwide">
<label for="email">Email</label>
<input type="email" class="form-control" id="email" placeholder="Enter Email" required>
</fieldset>
</div>
</div>
</div>
</div>
<div class="panel">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title va-middle">Other Settings
<img src='../images/colopen.svg' data-swap='../images/coll.svg' class="panel-icon collapse-icon" role="button" data-toggle="collapse" data-parent="#accordion" href="#collaspeTwo" aria-expanded="true" aria-controls="collaspeTwo">
</h4>
</div>
<div id="collaspeTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-default">
<div class="row fieldpos">
<fieldset class="form-group textwide">
<label for="group">Test</label>
<input type="text" class="form-control " id="group" placeholder="test" required>
</fieldset>
</div>
</div>
</div>
</div>
</div>
<button type="submit" class="btn btn-success form-control savechanges">Save Changes</button>
<button class="btn btn-success form-control test">Call Function</button>
</form>
</body>
JS JS
$(document).on("click", ".test", function (){
$("input[required]").each(function(){
var inputval = $(this).val();
var collaspe = $(this).closest(".collapse-icon").attr("aria-expanded");
console.log(collaspe);
if(!inputval){
console.log("Required Empty");
$(".collapse-icon").trigger("click");
} else {
console.log("Required has value");;
}
});
});
Any suggestions? 有什么建议么？
3 个解决方案
解决方案1
4 已采纳 2016-09-26 15:34:19
$.closest traverses up the DOM searching only ancestors, it will not search for the "literal" closest element. $.closest遍历DOM，仅搜索祖先，而不搜索“文字”最近的元素。 Your .collapse-icon don't appear to be direct parents, but rather are children of the .panel-heading elements (which are parents). 您的.collapse-icon似乎不是直接父级，而是.panel-heading元素的子级（它们是父级）。 So the solution would be $(this).closest('.panel-heading').find('.collapse-icon') 所以解决方案将是$(this).closest('.panel-heading').find('.collapse-icon')
UPDATE : I apologize, in my answer I mispoke. 更新 ：对不起，我的回答是错误的。 It should be .closest('.panel').find('.panel-heading .collapse-icon') since .panel-heading is a sibling of the or input's parent. 它应该是.closest('.panel').find('.panel-heading .collapse-icon')因为.panel-heading是或输入的父级的同级。 So you need the .panel-body 's parent and then find it's heading collapse icon. 因此，您需要.panel-body的父对象，然后找到它的标题折叠图标。
解决方案2
0 2016-09-26 15:45:07
As already explained closest only search in direct ancestors. 如前所述，仅在直接祖先中进行最接近的搜索。
Here is a working fiddle - https://jsfiddle.net/z5wbxzzo/2/ 这是一个工作的小提琴-https: //jsfiddle.net/z5wbxzzo/2/
$(document).on("click", ".test", function (){
$("input[required]").each(function(){
var inputval = $(this).val();
var collaspe = $(this).closest(".panel-collapse").siblings(".panel-heading").find(".collapse-icon").attr("aria-expanded");
console.log(inputval, collaspe);
if(!inputval){
console.log("Required Empty");
$(".collapse-icon").trigger("click");
} else {
console.log("Required has value");;
}
});
});
hope this helps 希望这可以帮助
解决方案3
0 2016-09-26 15:49:50
closest() return the first ancestor matching the specified selector. 最近的（）返回匹配指定选择器的第一个祖先。
.collapse-icon is not an ancestor of input[required] .collapse-icon不是输入的祖先[必需]
As I guess there is more than one .panel element in a .panel-group you will have to identify first the top .panel element (by an id or a specific class name or whatever) next dive into it to find the .collapse-icon 我猜一个.panel组中有多个.panel元素，您首先必须识别出顶部.panel元素（通过ID或特定的类名或其他名称），然后再深入其中才能找到.collapse-图标
html code HTML代码
<div class="panel panel-container">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title va-middle">Account Settings
<img src='../images/colopen.svg' data-swap='../images/coll.svg' class="panel-icon collapse-icon" role="button" data-toggle="collapse" data-parent="#accordion" href="#collaspeOne" aria-expanded="true" aria-controls="collaspeOne">
</h4>
</div>
...
js code js代码
$(this).closest('.panel-container').find('.collapse-icon')
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.