自定义属性不可从 li 获取

Question

我有以下代码/结构，如果自定义属性匹配，我想做的是隐藏一个 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>

Answer 1

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

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

这是一个 JSFiddle 演示：http://jsfiddle.net/wANxV/

Answer 2

主包装器的 id 和 class 值相同。这不是一件好事。 在您的 id 值 (id="search-img-ctrl-1" etc) 之后放置一个数字或其他数字，然后在类而不是 id 上执行每个循环

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

在你的标记中加上“数据”前缀（正如 Satpal 所说）和其他你可以直接使用选择器的东西

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

Answer 3

这段代码读取第一个找到的元素的属性，但它没有过滤它：

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

过滤器可能如下所示：

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

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

Answer 4

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

让我们分解这行代码：

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

如您所知，jQuery(this).find('li') 返回 this 的所有后代，它们是 li，在您的示例中，有 14 个。

.attr() 应用于一组 14 个元素时返回什么？

我猜它可以返回一个数组，一个连接，谁知道呢？但是 jQuery 的作者决定只返回对应于集合中第一个元素的属性。在这种情况下，您在<li>Name</li> 上调用.attr(elementToHide)。这个元素没有“file_type”属性，因此，你得到一个空字符串作为回报。

这里有一个快速的小提琴来说明：http://jsfiddle.net/pmn4/B9bqK/

---

要解决您的问题，请使用@keypaul 和@closure 描述的技术或使用jQuery's filter method