从DIV内部的元素获取值

Get values from elements inside DIV

本文关键字：获取 元素 DIV 内部      更新时间：2023-09-26

我需要在单击一个按钮时获得div内部的值，该按钮位于该div内部

<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和.productt_id中获取值，但问题是我们有很多相同的div（产品卡），其中有很多按钮。我想我应该用$（这个）之类的东西，但实际上我不知道怎么用。

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

$("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);

})

$(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/

您可以向父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');
});

谢谢大家的建议，我找到了一个解决方案：

    $("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);
})
相关文章：