jQuery 單擊單選按鈕時查找 DIV 內部值

Question

當我單擊單選按鈕時，我想要獲得的是直接上 div 值（帳戶管理員）。

下面是我的 HTML 結構。 每當我點擊 admin 或 alan 單選按鈕時，給我 div 內部文本 Accounts Admin。

怎樣才能得到那個值？

<div class="display-flex flex-row">
  <div class="p-1 ez-sub-heading mt-1">
    Accounts Admin
  </div>
</div>
<div class="row m-0">
  <div class="col-auto">
    <div>
      <input
        id="admin"
        type="radio"
        value="admin"
        name="eng-name"
        class="eng-name userlist active"
      />
    </div>
  </div>
</div>
<div class="row m-0">
  <div class="col-auto">
    <div>
      <input
        id="alan"
        type="radio"
        value="alan"
        name="eng-name"
        class="eng-name userlist active"
      />
    </div>
  </div>
</div>

我正在嘗試這種方式，但我無法獲得價值。

$(this).parent().find(".ez-sub-heading").text()

Answer 1

假設你有多個這樣的塊，我會稍微改變 html 結構，這樣你就有一個完整塊的包裝器。 使用closest() function 您可以找到第一個包裝父級，然后使用find()查找 header 元素。

您可以使用trim()刪除由代碼縮進引起的空白。

 $('.userlist').on('click', (e) => { var text = $(e.currentTarget).closest('.wrapper').find('.ez-sub-heading').text(); console.log(text.trim()); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="display-flex flex-row wrapper"> <div class="p-1 ez-sub-heading mt-1"> Accounts Admin </div> <div class="row m-0"> <div class="col-auto"> <div> <input id="admin" type="radio" value="admin" name="eng-name" class="eng-name userlist active"> </div> </div> </div> <div class="row m-0"> <div class="col-auto"> <div> <input id="alan" type="radio" value="alan" name="eng-name" class="eng-name userlist active"> </div> </div> </div> </div> <div class="display-flex flex-row wrapper"> <div class="p-1 ez-sub-heading mt-1"> Accounts Admin 2 </div> <div class="row m-0"> <div class="col-auto"> <div> <input id="admin" type="radio" value="admin" name="eng-name2" class="eng-name userlist active"> </div> </div> </div> <div class="row m-0"> <div class="col-auto"> <div> <input id="alan" type="radio" value="alan" name="eng-name2" class="eng-name userlist active"> </div> </div> </div> </div>

Answer 2

使用您的 HTML 結構，您需要找到最近的（最近的父） .row ，然后使用prevAll來獲取 header 行。

$(this).closest(".row").prevAll(".flex-row").first().text().trim()

 $("input.userlist").click(function() { console.log($(this).closest(".row").prevAll(".flex-row").first().text().trim()) });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="display-flex flex-row"> <div class="p-1 ez-sub-heading mt-1"> Accounts Admin </div> </div> <div class="row m-0"> <div class="col-auto"> <div> <input id="admin" type="radio" value="admin" name="eng-name" class="eng-name userlist active"> </div> </div> </div> <div class="row m-0"> <div class="col-auto"> <div> <input id="alan" type="radio" value="alan" name="eng-name" class="eng-name userlist active"> </div> </div> </div> <div class="display-flex flex-row"> <div class="p-1 ez-sub-heading mt-1"> Second Header </div> </div> <div class="row m-0"> <div class="col-auto"> <div> <input id="admin" type="radio" value="admin" name="eng-name" class="eng-name userlist active"> </div> </div> </div> <div class="row m-0"> <div class="col-auto"> <div> <input id="alan" type="radio" value="alan" name="eng-name" class="eng-name userlist active"> </div> </div> </div>

對 HTML 結構進行小改動並添加一些類會使這變得更簡單（此處未包括，正如其他答案中已經建議的那樣）。