如何給html元素指定範圍

-1

<article class="product_summary" data-product-id="1" data-product-price="45.00"> 
<img class="product_image" src="images/cufflinks.jpg" alt="cufflinks"> 
<h1 class="product_title">Personalised cufflinks</h1> 
<span class="product_price">£45.00</span> 
<a class="add_to_basket" href="/add-to-basket?product_id=1">Add to Basket</a> 
</article>

說我有一個像上面那樣的元素。我怎麼給它的範圍，以便我可以訪問它裏面的不同元素？我基本上希望能夠從中獲取值。即價格，標題等如何給html元素指定範圍

來源

2017-08-12 The Walrus

如果數據PRODUCT-ID = 「1」是獨特的，然後用任何的div容器和訪問DIV包裹[數據產品 - id =「1」]和其中的所有孩子。 – user5811898

請分享相關的JavaScript代碼。 – trincot

你到目前爲止嘗試過什麼？請更新您的問題，幷包括您所做的任何嘗試，謝謝。 – NewToJS

你有一些zero-width spaces在該HTML代碼片段，這會使事情變得複雜。該字符出現在每個=和>以及其他幾個地方之後。由於它不需要水平空間，因此很難發現它。

該字符嚴重影響屬性值，所以最好將它從源代碼中刪除。

這裏是將列出一些內容的代碼。我已刪除那些零個空格字符從HTML：

for (let article of document.querySelectorAll("article")) { 
 
    console.log('Article ID:', article.dataset.productId); 
 
    console.log('Price:', article.dataset.productPrice); 
 
    console.log('Title:', article.querySelector("h1").textContent); 
 
}

<article class="productsummary" data-product-id="1" data-product-price="45.00"> 
 
    <img class="product_image" src="images/cufflinks.jpg" alt="cufflinks"> 
 
    <h1 class="product_title">Personalised cufflinks</h1> 
 
    <span class="product_price">£45.00</span> 
 
    <a class="add_to_basket" href="/add-to-basket?product_id=1">Add to Basket</a> 
 
</article>

來源

2017-08-12 12:54:02 trincot

如何給html元素指定範圍

回答

相關問題