Question

我需要在单击按钮时获取div中的值，它位于此div内。这是html结构：

<div class="products__item">
  <div class="products__content">
    <a class="products__title" href="#">Altec Lansing Octiv Duo M202 акустическая система акустическая система</a>
    <div class="products__priceholder">
      <p class="products__price"><strong>86 590</strong> руб.</p>
      <small class="products__id">ID. 10906</small>
      </div>
      <p class="exist">В наличии</p>
      <div class="products__buttonholder">
      <a href="#" data-reveal-id="buyModal" class="button button-buy-modal">Купить</a>
      </div>
 </div>
</div>

当我点击.button-buy-modal时，我需要从.products__title .products__price和.products__id获取值，但问题是我们有很多相同的div（产品卡），以及里面有很多按钮。我认为我应该使用像$（this）这样的东西，但实际上我不知道如何。

我试图测试这样的东西，但它不起作用：

$("a.button-buy-modal").click(function () {
    $(this).find().closest('.products__priceholder').addClass('test1');
})

这是一个解决方案：

$("a.button-buy-modal").click(function () {
var prTitle = $(this).parent().parent().children('.products__title').html();
var prPrice = $(this).parent().parent().children('.products__priceholder').children('.products__price').children('strong').html();
var prId = $(this).parent().parent().children('.products__priceholder').children('.products__id').html();
var prImage = $(this).parent().parent().parent().children('.products__imageholder').children('.products__thumbnail').attr('src');
console.log(prTitle);
console.log(prPrice);
console.log(prId);
console.log(prImage);

}）

Answer 1

$(this).parent().parent().find('.products__price').text()

会给你这个 - "86 590 руб."

   $(this).parent().parent().find('.products__price').html()

会给你这个 - "<strong>86 590</strong> руб."

要了解有关它的更多信息，例如如何选择任何特定的DOM元素并阅读或操作它等，请阅读 - http://api.jquery.com/category/selectors/

Answer 2

您可以向父div添加ID，或使用eq（x）选择正确的组。

<div id="mydiv1" class="products__item">
  <div class="products__content">
    <a class="products__title" href="#">Altec Lansing Octiv Duo M202 акустическая система акустическая система</a>
    <div class="products__priceholder">
      <p class="products__price"><strong>86 590</strong> руб.</p>
      <small class="products__id">ID. 10906</small>
      </div>
      <p class="exist">В наличии</p>
      <div class="products__buttonholder">
      <a href="#" data-reveal-id="buyModal" class="button button-buy-modal">Купить</a>
      </div>
 </div>
</div>

然后使用jQuery：

var title = $('#div1 .products__title').html();
/// OR
var title = $('.products__item:eq(0) .products__title').html();

var price = $('#div1 .products__price').html();
/// OR
var price = $('.products__item:eq(0) .products__price').html();

price = price.replace(/<[^>]+>/g, ""); // regex to remove tags

修改

如果你想使用.closest（），你不需要.find（）

$("a.button-buy-modal").click(function () { $(this).closest('.products__priceholder').addClass('test1'); });

Answer 3

感谢所有的建议，我找到了解决方案：

    $("a.button-buy-modal").click(function () {
    var prTitle = $(this).parent().parent().children('.products__title').html();
    var prPrice = $(this).parent().parent().children('.products__priceholder').children('.products__price').children('strong').html();
    var prId = $(this).parent().parent().children('.products__priceholder').children('.products__id').html();
    var prImage = $(this).parent().parent().parent().children('.products__imageholder').children('.products__thumbnail').attr('src');
    console.log(prTitle);
    console.log(prPrice);
    console.log(prId);
    console.log(prImage);
})

从DIV中的元素获取值

3 个答案: