时间戳

首页 > 解决方案 > 获取 div 内元素（子元素）的 ID 和内部文本

javascript - 获取 div 内元素（子元素）的 ID 和内部文本

问题描述

我有多个div 代表一些产品，示例如下：

<div class="special" id="special">
    <a href="12v.html" class="special-link">
        <p class="special-img">
            <img src="img/25.png" alt="">
        </p>
        <h3><span id="pdctName">12v XXXXXXXXXXXXXXX</span></h3>
    </a>
    <p class="special-info">
        <span class="ribbon2 animated swing infinite">
           <span>Oferta!</span>
        </span>
        <a href="#" class="special-categ">Ofertas especiales</a>
        <span class="special-price">200,00 €&lt;/span>
        <del style="margin-top: -9px;">250,00 €&lt;/del>
        <a href="0#" class="special-add cd-add-to-cart js-cd-add-to-cart">+ Add to cart</a>
    </p>
</div>

获取此除法 () 中某些元素的 ID（因此值）的麻烦div id="special"：例如，我想获取<span id="pdctName">and的 ID <span class="special-price">。

触发我的功能的元素是 <a href="0#" class="special-add cd-add-to-cart js-cd-add-to-cart">+ Add to cart</a>.

我试过document.querySelector('#special span#pdctName').innerText了，它只适用于这个 div的第一次出现，但我想为选定的部门检索这些元素。

标签： javascript

解决方案

首先，您必须在每个 add(+) 按钮上附加事件

然后使用调用父 div 元素this.parentElement.parentElement

然后使用获取值querySelector

function addtocart(){
  event.preventDefault();
  var spanid = this.parentElement.parentElement.querySelector("a h3 span").id;
  var price = this.parentElement.parentElement.querySelectorAll("p span")[2].innerText;
  console.log(spanid);
  console.log(price);
}
[...document.querySelectorAll(".special-add")].forEach((btn)=>{
  btn.addEventListener("click",addtocart);
});
<div class="special" id="special">
<a href="12v.html" class="special-link">
    <p class="special-img">
        <img src="img/25.png" alt="">
    </p>
    <h3><span id="pdctName">12v XXXXXXXXXXXXXXX</span></h3>
</a>
<p class="special-info">
    <span class="ribbon2 animated swing infinite">
       <span>Oferta!</span>
    </span>
    <a href="#" class="special-categ">Ofertas especiales</a>
    <span class="special-price">200,00 €&lt;/span>
    <del style="margin-top: -9px;">250,00 €&lt;/del>
    <a href="0#" class="special-add cd-add-to-cart js-cd-add-to-cart">+ Add to cart</a>
</p>
</div>

当数据动态添加到页面时，这是最佳实践。

推荐阅读