Question

我试图从指定类的最近元素中获取属性值，但是继续未定义。

下面是我的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

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

有什么建议吗？

编辑：JSFiddle

Answer 1

$.closest遍历DOM搜索只有祖先，它不会搜索“文字”最接近的元素。您的.collapse-icon似乎不是直接父母，而是.panel-heading元素（父母）的子女。所以解决方案是$(this).closest('.panel-heading').find('.collapse-icon')

更新：我道歉，在我的回答中我误解了。它应该是.closest('.panel').find('.panel-heading .collapse-icon')，因为.panel-heading是或输入的父级的兄弟。因此，您需要.panel-body的父级，然后找到它的标题折叠图标。

Answer 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");;
        }
    });
    });

希望这会有所帮助

Answer 3

nearest（）返回与指定选择器匹配的第一个祖先。

.collapse-icon不是输入的祖先[必需]

因为我猜在.panel组中有多个.panel元素，您必须首先识别顶部.panel元素（通过id或特定的类名称或其他），然后潜入它以查找.collapse图标

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

$(this).closest('.panel-container').find('.collapse-icon')

Jquery - 获取最接近类的属性值

3 个答案: