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

我想在单击“ button-click”类的按钮时希望从“ 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>

JavaScript

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

Answer 7

我们不知道“ i-want-to-get-this”这个类名是否唯一，并且由于我们在谈论循环，所以最好不要跳到循环标记之外。我们可以使用$manufacturerId和$.closest()

在标签之间移动

这仍然是一种不好的做法，因为我们冒着丧失功能的风险。如果有人在循环中输入了其他标签，则功能可能无法正常工作

编辑：如果我们假设带有“ toggle”类的div标签是恒定的，我们还可以设置.prev（'。toggle'），以便将获取其他ID的可能性降到最低。

我建议您在按钮上添加data-id或类似的data属性像：$.prev() 然后，您只需使用<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'));

})

使用jQuery

7 个答案: