Question

我在WordPress中使用Lightview，并尝试为WP画廊提供必要的rels和类。默认的图库标记类似于：

<div id="gallery-1" class="gallery galleryid-1">
    <dl class="gallery-item">
       <dt class="gallery-icon">
       <a href="image-link"><img src="xxx" /></a>
       </dt>
    </dl>
    <dl class="gallery-item">
       <dt class="gallery-icon">
       <a href="image-link"><img src="xxx" /></a>
       </dt>
   </dl>
</div>

使用jQuery我需要在链接（触发Lightview）和属性（在查看时将它们分组）上放置一个类。我可以得到一个简单的部分：

$(".gallery-icon a").attr('class','lightview');
$(".gallery-icon a").attr('data-lightview-group','group');

有效。类=＆＃34; lightview＆＃34;激活，data-lightview-group属性将所有图像保存在一个组＆＃34; group＆＃34;为了最好的导航。这样，原始代码就像这样：

<div id="gallery-1" class="gallery galleryid-1">
    <dl class="gallery-item">
       <dt class="gallery-icon">
       <a href="image-link" class="lightview" data-lightview-group="group"><img src="xxx" /></a>
       </dt>
    </dl>
    <dl class="gallery-item">
       <dt class="gallery-icon">
       <a href="image-link" class="lightview" data-lightview-group="group"><img src="xxx" /></a>
       </dt>
    </dl>
</div>

但如果有一个包含多个图库的长页面，则会合并它们，因为所有链接都具有相同的＆＃34; data-lightview-group＆＃34;。

有一种方法可以从每个图库中获取ID并将其用作此data-lightview-group属性的值吗？或者任何其他方法在每个图库的所有链接中都有唯一值？

Answer 1

尝试 .each ，如

$(".gallery-icon a").each(function(){
     $(this).attr('data-lightview-group','group');
     $(this).attr('class','lightview');
     //Better to use addClass like
     -->$(this).addClass('lightview');
});

如果要将id合并到data-lightview-group，请添加此

var this_group = 'group'+$(this).attr('id');
$(this).attr('data-lightview-group',this_group);

Answer 2

尝试此操作为每个图库指定不同的组名：

// for each gallery
$('.gallery').each(function() {

    // add lightview class
    $(this).find(".gallery-icon a").attr('class','lightview');

    // set a unique group name (group-<id of this galley>)
    $(this).find(".gallery-icon a").attr('data-lightview-group', 'group-' + $(this).attr('id'));
});

获取id值并使用jQuery设置为link rel

2 个答案: