Question

我有一个产品清单，每个产品都显示在这样的div中：

<div data-productSheetId="n" class="productSheet"></div>

我当前的选择器如下：

var productSheet = $('[data-productSheetId="' + $(this).data('productSheetId') + '"]');

我很确定我做错了，我怎么能正确选择呢？

Answer 1

您可以使用.filter()方法：

var productSheet = $("div.productSheet").filter(function() {
    return $(this).data("productsheetid") == "n";
});

<强>更新：

感谢@mplungjan。数据属性应全部小写。现在，当属性具有连字符时，可以使用驼峰大小写等效来读取数据：

//<div data-productsheetid="n" class="productSheet"></div>
//use:
.data('productsheetid')

//<div data-product-sheet-id="n" class="productSheet"></div>
//use either:
.data('product-sheet-id')
//or:
.data('productSheetId')

Answer 2

你可能想要

具有全部小写属性
使用data-attribute按ID

<div id="xxx" class="productSheet"></div>
<div id="yyy" class="productSheet"></div>
<div id="zzz" class="productSheet"></div>

<button class="btn" type="button" data-productsheetid="xxx">Select XXX</button>

$(function() {
  $(".btn").on("click",function() { 
    // get the id to access from the button's data attribute
    var id = $(this).data("productsheetid"); // for readability
    var productSheet = $("#"+id);
  });  
});

Answer 3

只需小写你的密钥：

productSheet = $('[data-productSheetId="' + $(this).data('productsheetid') + '"]');

您正在使用的camelcase密钥（productSheetId）用于

等属性

 <div data-product-sheet-id="n" class="productSheet"></div>

Answer 4

var x = 5;

var productSheet = $('div[data-productSheetId =' + x + ']');

这将是一招。只需在选择时更改变量x。

如何正确选择div？

4 个答案: