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

2019年8月4日 200次阅读

我有一个包含图像/视频/画廊等的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可以具有一类视频/图像.

我已经尝试在IF条件中使用“return false”但是这会破坏我的整个EACH函数,在第一次引用时停止它.

最佳答案 您可以创建一个临时变量来跟踪已经遍历的项类型

(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) {
    }
});
点赞