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

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

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

.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代码

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

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

问题描述

3 个解决方案

解决方案1
4 已采纳 2016-09-26 15:34:19

解决方案2
0 2016-09-26 15:45:07

解决方案3
0 2016-09-26 15:49:50

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

问题描述

3 个解决方案

解决方案1 4 已采纳 2016-09-26 15:34:19

解决方案2 0 2016-09-26 15:45:07

解决方案3 0 2016-09-26 15:49:50

解决方案1
4 已采纳 2016-09-26 15:34:19

解决方案2
0 2016-09-26 15:45:07

解决方案3
0 2016-09-26 15:49:50