自定义属性不可从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 =＆＃34; search-img-ctrl-1＆＃34;等）之后放一个数字或者其他数字，然后在不在id上的每个循环上进行

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

使用＆＃39;数据＆＃39;将属性放入标记中。前缀（如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的{​​{1}}的所有后代，在您的示例中，其中有14个。

li在应用于一组14个元素时会返回什么？

我想它可以返回一个数组，一个串联，谁知道？，但是jQuery的编写者决定只返回对应于该集合中第一个元素的属性。在这种情况下，您在.attr()上呼叫.attr(elementToHide)。此元素没有＆＃34; file_type＆＃34;因此，你得到一个空字符串作为回报。

这里有一个简单的小提示：http://jsfiddle.net/pmn4/B9bqK/

---

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