Question

我有一个包含图片/视频/画廊等的div列表。结构如下：

<div class="item image">image content</div>
<div class="item video">video content</div>
<div class="item gallery">gallery content</div>
<div class="item image">image content</div>
<div class="item image">image content</div>
<div class="item video">video content</div>

如您所见，可以有多个具有相同内容类型的div。我想要实现的是使用class = item扫描div列表，并为每种内容类型生成一个按钮。

这是我到目前为止使用的jQuery EACH函数

$(document).ready(function () {
    $(".item").each(function () {
        if ($(this).hasClass("image")) {
            alert('image found');
        };
        if ($(this).hasClass("video")) {
            alert('video found');
        };
    });
});

问题是警报多次执行，对于每个div等于我的条件。由于我计划为每种内容类型生成按钮，因此当前代码将添加重复按钮，因为多个div可以拥有一类视频/图像。

我尝试过使用＆＃34;返回false＆＃34;在IF条件内但是会破坏我的整个EACH函数，在第一次引用时停止它。

Answer 1

一些非常简单的方法是为每种可能的内容类型添加状态变量并进行检查：

$( document ).ready(function() {        
    var _image = true,
        _video = true;
    $( ".item" ).each(function() {

      if ($(this).hasClass( "image" ) && _image) {
        _image = false;
        alert('image found');
      };
      if ($(this).hasClass( "video" ) && _video) {
        _video = false;
        alert('video found');
      };

    });
});

Answer 2

您可以创建一个临时变量来跟踪您已遍历的项目类型

(function() {
    var types = {},
    type_re = /\b(?:audio|video|quote|link|image|gallery|status|chat)\b/g;

    $('.item').each(function() {
        var m = this.className.match(type_re);

        if (m !== null && !types.hasOwnProperty(m[0])) {
            // code to add button
            console.log('add button for type ' + m[0]);

            types[m[0]] = true;
        }
    });
}());

Demo

以前的答案

您可以先创建一个包含文档中找到的所有类型的数组：

var types = [],
type_re = /audio|video|quote|link|image|gallery|status|chat/g;

$('.item').each(function() {
    var m;

    while ((m = type_re.exec(this.className)) !== null) {
        if (!$.inArray(types, t[0])) {
            types.push(t[0]);
        }
    }
});

// types is an array with all types found

或者，迭代所有可能的类型并根据每种类型过滤项目：

var $items = $('.item'),
types = ['audio', 'video', 'quote', 'link', 'image', 'gallery', 'status', 'chat'];

$.each(types, function(_, type) {
    var $itemsOfType = $items.filter(function() {
        return (' ' + this.className + ' ').indexOf(type) != -1;
    });
    if ($itemsOfType.length) {
    }
});

Answer 3

你可以这样做。

if($(".image").length>0)
  {
      alert("image Found")
      //generate button
  }

Answer 4

在jQuery ready函数中创建一个对象。完成循环后，使用按钮对象编写按钮。

$(document).ready(function () {
    var buttons = {};
    $(".item").each(function () {
        if ($(this).hasClass("image")) {
            buttons.image = 1;
        };
        if ($(this).hasClass("video")) {
            buttons.video = 1;
        };
    });
    // write buttons
    for (var type in buttons) {
      $('<button/>', {
        text: type,
        id: 'btn_'+ type,
        click: function () { alert('hi'); }
      }).appendTo('body');
    }
})

Answer 5

JSFIDDLE http://jsfiddle.net/rWrCA/

您可以轻松地将数组用于类型，并使用另一个数组来确定是否存在这些数组。这看起来像是：

$(document).ready(function () {
    // a list of all types and a list of types that were found
    var allTypes = ["image", "video", "gallery"];
    var typesFound = [];

    // loop over all items and add types to the list of found types
    $(".item").each(function () {
        for (var idx = 0; idx < allTypes.length; idx++) {
          if ($(this).hasClass(allTypes[idx])) {
            if (typesFound.indexOf(allTypes[idx]) < 0) {
              typesFound.push(allTypes[idx]);
            }
          }
        }
    });

    // as in the original code - prove this worked by displaying alerts!
    for (var idx = 0; idx < typesFound.length; idx++) {
      alert(typesFound[idx] + ' found');
    }
});

我认为应该这样做！

扫描特定类的DIV以生成唯一链接

5 个答案:

以前的答案