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