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

Question

Below is part of some code on an html page that lists shopping cart products. Using JavaScript/jQuery, I need to be able to loop through the li items and get the div "data-" values for each. The issue that I am having is that there are no IDs for the div that has the data- value (). I only see the div for "CategoryContent".

    <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>

So, there is only one li item here, on a typical page, there are up to 9. My goal is to use JavaScript to get the data-product values and then use that to look up a better image thumbnail and have it replaced. So, how do I get the value set for data-product ?

Answer 1

Quite easy:

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

You can use this:

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

Fiddle: http://jsfiddle.net/we5q7omg/

Answer 4

You could use the class name to get the data-product

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

Answer 5

Using JQuery, you can get the elements with the data-product attribute by simply calling

$('[data-product]')

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

From there you can simply do pull the products from the elements. For Example:

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