Question

以下是html页面上列出购物车产品的部分代码的一部分。使用JavaScript / jQuery，我需要能够循环遍历li项并为每个项获取div“data-”值。我遇到的问题是没有具有data-value（）的div的ID。我只看到“CategoryContent”的div。

    <div class="Block CategoryContent Moveable Panel" id="CategoryContent">
      <ul class="ProductList ">
        <li class="Odd">
          <div class="ProductImage QuickView" data-product="577">
             <a href="http://example.com/sweater-vest-v-neck-cotton/"><img src="http://cdn3.example.com/products/577/images/1731/2311-.jpg?c=2" alt="Sweater Vest V-Neck Cotton" /></a>
          </div>
          <div class="ProductDetails">
             <a href="http://example.com/sweater-vest-v-neck-cotton/" class=" pname">Sweater Vest V-Neck Cotton</a>
          </div>
          <em class="p-price">$45.04</em>
          <div class="ProductPriceRating">
            <span class="Rating Rating0">
              <img src="http://cdn3.example.com/templates/custom/images/IcoRating0.png?t=" alt="" style="" />
            </span>
          </div>

          <div class="ProductActionAdd" style="display:;">
             <a href="http://example.com/sweater-vest-v-neck-cotton/" class="btn icon-Choose Options" title="Choose Options">Choose Options</a>
          </div>
     </li>
  </ul>
    </form>
    </div>

所以，这里只有一个li项，在典型页面上，最多有9个。我的目标是使用JavaScript获取data-product值，然后使用它来查找更好的图像缩略图，并将其替换。那么，我如何获得data-product的值？

Answer 1

非常简单：

// Loop through all list items of ul.ProductList:
$("ul.ProductList li").each(function (index, element) {

    // Find the element with attribute data-product:
    $dp = $(element).find("[data-product]");

    // Get the value of attribute data-product:
    var product = $dp.attr("data-product");

    // Now set the high quality thumbnail url:
    var url = "/images/hq/" + product + ".png"; // Note that this is just an example

    // Here you can use $(element) to access to current li (and the img):
    $(element).find('.ProductImage img').attr('src', url);
});

Answer 2

您可以使用：

$("#CategoryContent div[data-product]").each(function(){
   alert($(this).attr('data-product'));
});

Answer 3

Pure JS：

var divs = document.querySelectorAll('#CategoryContent div[data-product]');
var index = 0, length = divs.length, prodIds = [];
for ( ; index < length; index++) {
    prodIds.push(divs[index].getAttribute('data-product'));
}

小提琴：http://jsfiddle.net/we5q7omg/

Answer 4

您可以使用类名来获取数据产品

var products = document.getElementsByClassName("ProductImage");
for(var i=0; i<products.length;i++)
{
   console.log(products[i].getAttribute("data-product"));
 }

Answer 5

使用JQuery，只需调用

即可获取具有data-product属性的元素

$('[data-product]')

// Or if you only want the data-product elements within the UL.
$('ul').find('[data-product]')

从那里你可以简单地从元素中拉出产品。例如：

var products = $('[data-product]').map(function() { 
  return $(this).data('product'); 
});

如何获取没有ID的div的数据值？

5 个答案: