Javascript 无法从li获取自定义属性

我有以下代码/结构，我试图做的是在自定义属性匹配时隐藏一个div。目前的问题是，我无法获得如下代码所示的自定义属性：

  var elementToHide = 'file_type';
        jQuery('#search-img-ctrl').each(function() {
            var locationli = jQuery(this).find('li').attr(elementToHide);
            alert(locationli);
            alert(elementToHide); // I can't get the custom attribute
            if (locationli != elementToHide) {
                jQuery(this).find('.search-img-box').hide();
            } else {
                jQuery(this).find('.search-img-box').show();
            }
        });

下面是我的HTML结构

<div id="search-img-ctrl" class="search-img-ctrl">
 <div class="sampages" style="display: block;">
  <div class="search-img-box sampageitems">
   <a href="image_detail.php">
   <img id="imageimage_array" width="277" height="206" src="upload/2014-05-02-14-05-512014-04-08-14-04-40000560_d.png" alt="">
   </a>
   <br>
   <ul>
    <li> Name </li>
    <li>upload/2014-05-02-14-05-512014-04-08-14-04-40000560_d.png</li>
    <li>identity </li>
    <li>Modify</li>
    <li latitude="null">Latitude</li>
    <li>null</li>
    <li longitude="null">Longitude</li>
    <li>null</li>
    <li model="null">model</li>
    <li>null</li>
    <li file_type="png">model</li>
    <li>png</li>
    <li> Image Size </li>
    <li>11Kb</li>
   </ul>
  </div>
</div>

---

理想情况下，在html5中，您应该使用数据前缀作为自定义属性的后缀。但是，要在代码中查找具有特定属性的li，请使用：

var locationli = jQuery(this).find('li[' + elementToHide + ']');

---

这里有一个JSFIDLE演示了这一点：

理想情况下，在html5中，您应该使用数据前缀作为自定义属性的后缀。但是，要在代码中查找具有特定属性的li，请使用：

var locationli = jQuery(this).find('li[' + elementToHide + ']');

---

下面是一个JSFIDLE演示：

主包装器具有相同的id和类值。这不是一个好主意。 在id值id=search-img-ctrl-1等后面加上一个数字或其他数字，然后在类而不是id上进行每个循环

JQuery.each('.search-img-ctrl');

如Satpal所说，在标记中添加带有“data”前缀的属性，以及其他可以直接使用选择器的内容

var locationli = jQuery(this).find("li["+elementToHide+"]");

---

主包装器的id和类的值相同。这不是一个好主意。 在id值id=search-img-ctrl-1等后面加上一个数字或其他数字，然后在类而不是id上进行每个循环

JQuery.each('.search-img-ctrl');

如Satpal所说，在标记中添加带有“data”前缀的属性，以及其他可以直接使用选择器的内容

var locationli = jQuery(this).find("li["+elementToHide+"]");

---

此代码读取第一个找到的元素的属性，但不会对其进行筛选：

var locationli = jQuery(this).find('li').attr(elementToHide);

过滤器可能如下所示：

var locationli = jQuery(this).find('li')
                 .filter(function(){
                     return $(this).attr(elementToHide);
                 });

---

但显然闭包的方法要短得多。keypaul是正确的，使用data-prefix是将您自己的元数据存储在元素上的正确方法。

此代码读取第一个找到的元素的属性，但不会对其进行过滤：

var locationli = jQuery(this).find('li').attr(elementToHide);

过滤器可能如下所示：

var locationli = jQuery(this).find('li')
                 .filter(function(){
                     return $(this).attr(elementToHide);
                 });

但显然闭包的方法要短得多。keypaul是对的，使用data-prefix是将自己的元数据存储在元素上的正确方法。

使用li['+elementToHide+']的答案很好，但可以帮助您了解自己的体验

让我们将这一行代码分解： 正如你所知道的，jQuerythis.find'li'返回这个函数的所有decentant，它们都是li的，在你的例子中，有14个

当应用于一组14个元素时.attr返回什么？ 我猜它可能返回一个数组，一个连接，谁知道呢？但是jQuery的编写者决定只返回与集合中第一个元素对应的属性。在本例中，您正在调用.attrelementToHide on Name。此元素没有file_type属性，因此，返回一个空字符串

这里有一个快速的提琴来说明：

要解决您的问题，请使用@keypaul和@closure所描述的技巧或使用

使用li['+elementToHide+']的答案是很好的，但可以帮助您了解您正在经历的事情

让我们将这一行代码分解： 正如你所知道的，jQuerythis.find'li'返回这个函数的所有decentant，它们都是li的，在你的例子中，有14个

当应用于一组14个元素时.attr返回什么？ 我猜它可能返回一个数组，一个连接，谁知道呢？但是jQuery的编写者决定只返回与集合中第一个元素对应的属性。在本例中，您正在调用.attrelementToHide on Name。此元素没有file_type属性，因此，返回一个空字符串

这里有一个快速的提琴来说明：

要解决您的问题，请使用@keypaul和@closure描述的技术，或者使用

Try:var locationli=jQuerythis；我看到jQuery'search-img-ctrl'。每个元素都有多个ID为search-img-ctrl的元素。同样对于自定义属性，也可以在其前面加上数据前缀，尝试：var locationli=jQuerythis.find'li['+elementToHide+']；我看到jQuery'search-img-ctrl'。每个元素都有多个ID为search-img-ctrl的元素。同样，对于自定义属性，也要在其前面加上数据前缀-