使用jQuery獲取其他元素.closest（）或parent（）中的類

Question

我有一個問題，對於專家來說很簡單。

我確實在一些html標記上循環播放，例如以下代碼段：

// looping
<div class="toggle m-toggle-accordian">
    <p class="i-want-to-get-this" id="biaya-123">Biaya Admin 0%</p>
    <p>Rp 5000</p>
</div>
<div class="collapse m-coll-air-unselected">
    <div class="m-offer-detail">
        <div class="col-xs-8 m-offer-caption">Cicilan per Bulan</div>
        <div class="col-xs-4 m-offer-amount">Rp 4000</div>
    </div>
    <div class="m-offer-detail">
        <div class="button-click">Pilih</div>
    </div>
</div>
// end looping

我想在使用“按鈕單擊”類單擊按鈕時希望從“ i-want-to-get-this”類獲取ID值。

我嘗試使用.find（），但未成功。

$(this).find('.i-want-to-get-this').attr('id');

Answer 1

使用$($(".button-click").parent().parent().parent().find('.m-toggle-accordian .i-want-to-get-this')[0]).attr('id')定位到所需元素

 $(document).on("click", ".button-click", function() { console.log($($(this).parent().parent().parent().find('.m-toggle-accordian .i-want-to-get-this')[0]).attr('id')); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="toggle m-toggle-accordian"> <p class="i-want-to-get-this" id="biaya-123">Biaya Admin 0%</p> <p>Rp 5000</p> </div> <div class="collapse m-coll-air-unselected"> <div class="m-offer-detail"> <div class="col-xs-8 m-offer-caption">Cicilan per Bulan</div> <div class="col-xs-4 m-offer-amount">Rp 4000</div> </div> <div class="m-offer-detail"> <div class="button-click">Click me</div> </div> </div> 

Answer 2

我只是意識到那是您正在循環創建元素，所以我認為您需要添加更多這樣的代碼。

因此，當您循環創建元素時，為什么不將值添加為按鈕屬性呢？

<div class="button-click" data-elementId="biaya-123">Pilih</div>

然后您可以輕松地使用jquery

$('.button-click').click(function () {
    var myId = $(this).data('elementId'); // to get the target element ID
    var targetElement = $('#' + myId); // to get the targetElement
})

Answer 3

使用以下代碼從班級獲取ID

 $('.button-click').click(function(){ alert($('.i-want-to-get-this').attr('id')) }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="toggle m-toggle-accordian"> <p class="i-want-to-get-this" id="biaya-123">Biaya Admin 0%</p> <p>Rp 5000</p> </div> <div class="collapse m-coll-air-unselected"> <div class="m-offer-detail"> <div class="col-xs-8 m-offer-caption">Cicilan per Bulan</div> <div class="col-xs-4 m-offer-amount">Rp 4000</div> </div> <div class="m-offer-detail"> <div class="button-click">Pilih</div> </div> </div> 

Answer 4

 $(".button-click").on("click", function(){ console.log( $(this).parents(".m-coll-air-unselected").prev(".m-toggle-accordian").find(".i-want-to-get-this").attr("id") ); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="toggle m-toggle-accordian"> <p class="i-want-to-get-this" id="biaya-123">Biaya Admin 0%</p> <p>Rp 5000</p> </div> <div class="collapse m-coll-air-unselected"> <div class="m-offer-detail"> <div class="col-xs-8 m-offer-caption">Cicilan per Bulan</div> <div class="col-xs-4 m-offer-amount">Rp 4000</div> </div> <div class="m-offer-detail"> <div class="button-click">Click me</div> </div> </div> <div class="toggle m-toggle-accordian"> <p class="i-want-to-get-this" id="biaya-123">Foo Bar 0%</p> <p>Rp 5000</p> </div> <div class="collapse m-coll-air-unselected"> <div class="m-offer-detail"> <div class="col-xs-8 m-offer-caption">Element 2</div> <div class="col-xs-4 m-offer-amount">foo bar</div> </div> <div class="m-offer-detail"> <div class="button-click">Click me 2</div> </div> </div> 

Answer 5

您可以通過以下方式進行操作： https : //codepen.io/creativedev/pen/BPKbGP

$('.button-click').on('click', function(e){      
  console.log($(this).parents('.m-coll-air-unselected').prev('div').find('.i-want-to-get-this').attr('id'))
})

Answer 6

您可以通過創建父元素來實現此目的，例如：

<div class="parent">
 <div class="toggle m-toggle-accordian">
  <p class="i-want-to-get-this" id="biaya-123">Biaya Admin 0%</p>
  ...
 </div>
 <div class="collapse m-coll-air-unselected">
 ...
  <div class="m-offer-detail">
   <div class="button-click">Pilih</div>
  </div>
 </div>
</div>

Java腳本

$('.button-click').click(function() {
 $(this).parents('.parent').find('.i-want-to-get-this').attr('id');
});

Answer 7

我們不知道“我想得到這個”類名是否唯一，並且由於我們在談論循環，因此最好不要跳到循環標記之外。 我們可以使用$.closest()和$.prev()在標簽之間移動

這仍然不是一個好習慣，因為我們冒着停止功能的風險。 如果有人在循環中輸入了其他標簽，則功能可能無法正常工作

編輯：如果我們假定帶有“ toggle”類的div標簽是常量，我們還可以設置.prev（'。toggle'），以便將獲取其他ID的可能性降至最低。

我建議您在按鈕上添加data-id或類似數據屬性，例如： <button data-id='my-id-1' class="button-click">Click me</button>然后您可以簡單地使用$(this).data('id')

 $(document).on("click", ".button-click", function() { console.log($(this).closest('.collapse').prev().find('.i-want-to-get-this').first().attr('id')); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="toggle m-toggle-accordian"> <p class="i-want-to-get-this" id="i_got_id_1">Biaya Admin 0%</p> <p>Rp 5000</p> </div> <div class="collapse m-coll-air-unselected"> <div class="m-offer-detail"> <div class="col-xs-8 m-offer-caption">Cicilan per Bulan 1</div> <div class="col-xs-4 m-offer-amount">Rp 4000</div> </div> <div class="m-offer-detail"> <button class="button-click">Click me</button> </div> </div> <div class="toggle m-toggle-accordian"> <p class="i-want-to-get-this" id="i_got_id_2">Biaya Admin 1%</p> <p>Rp 5000</p> </div> <div class="collapse m-coll-air-unselected"> <div class="m-offer-detail"> <div class="col-xs-8 m-offer-caption">Cicilan per Bulan 2</div> <div class="col-xs-4 m-offer-amount">Rp 4001</div> </div> <div class="m-offer-detail"> <button class="button-click">Click me</button> </div> </div> <div class="toggle m-toggle-accordian"> <p class="i-want-to-get-this" id="i_got_id_3">Biaya Admin 113%</p> <p>Rp 5000</p> </div> <div class="collapse m-coll-air-unselected"> <div class="m-offer-detail"> <div class="col-xs-8 m-offer-caption">Cicilan per Bulan 3</div> <div class="col-xs-4 m-offer-amount">Rp 7000</div> </div> <div class="m-offer-detail"> <button class="button-click">Click me</button> </div> </div>