“全部”选项卡中的重复项目,WonderPlugin投资组合网格画廊

时间:2018-10-09 09:19:04

标签: javascript html css

我正在研究Wordpress项目,并使用插件WonderPlugin Portfolio Grid Gallery进行项目组合。 Plugin Link

它工作正常,但是当我单击“全部”选项卡以显示所有项目时,它基本上显示重复项,如果将项目插入两个类别,则它将显示两次。

这是一个临时链接。您可以看到第一个项目在第三行重复。 My Link

现在,我想通过JavaScript删除重复的div。     JS Fiddle

<div class="wonderplugin-gridgallery-list">

<div class="wonderplugin-gridgallery-item wonderplugin-gridgallery-item-0 wonderplugin-gridgallery-item-visible" style="left: 0px;">
<div class="wonderplugin-gridgallery-item-container">
<a href="#" data-title="Bhayani">
<img class="wonderplugin-gridgallery-item-img" alt="Bhayani" src="http://www.example.com/Bhayani.jpg">
</a>
</div>
<div class="wonderplugin-gridgallery-item-text">
<div class="wonderplugin-gridgallery-item-wrapper">
<div class="wonderplugin-gridgallery-item-title">Bhayani
</div>
</div>
</div>
</div>

<div class="wonderplugin-gridgallery-item wonderplugin-gridgallery-item-1 wonderplugin-gridgallery-item-visible" style="left: 204px;">
<div class="wonderplugin-gridgallery-item-container">
<a href="#" data-title="Nazim">
<img class="wonderplugin-gridgallery-item-img" alt="Nazim" src="http://www.example.com/Nazim.jpg">
</a>
</div>
<div class="wonderplugin-gridgallery-item-text">
<div class="wonderplugin-gridgallery-item-wrapper">
<div class="wonderplugin-gridgallery-item-title">Nazim
</div>
</div>
</div>
</div>

<div class="wonderplugin-gridgallery-item wonderplugin-gridgallery-item-2 wonderplugin-gridgallery-item-visible" style="left: 408px;">
<div class="wonderplugin-gridgallery-item-container">
<a href="#" data-title="Bhayani">
<img class="wonderplugin-gridgallery-item-img" alt="Bhayani" src="http://www.example.com/Bhayani.jpg">
</a>
</div>
<div class="wonderplugin-gridgallery-item-text">
<div class="wonderplugin-gridgallery-item-wrapper">
<div class="wonderplugin-gridgallery-item-title">Bhayani
</div>
</div>
</div>
</div>

<div class="wonderplugin-gridgallery-item wonderplugin-gridgallery-item-3 wonderplugin-gridgallery-item-visible" style="left: 612px;">
<div class="wonderplugin-gridgallery-item-container">
<a href="#" data-title="North">
<img class="wonderplugin-gridgallery-item-img" alt="North" src="http://www.example.com/North.jpg">
</a>
</div>
<div class="wonderplugin-gridgallery-item-text">
<div class="wonderplugin-gridgallery-item-wrapper">
<div class="wonderplugin-gridgallery-item-title">North
</div>
</div>
</div>
</div>

</div>

<style>
.wonderplugin-gridgallery-list {
display: block;
position: relative;
max-width: 100%;
margin: 0px auto;
width: 812px;
height: 616px;
}
.wonderplugin-gridgallery-item {
transition: all 0.5s ease 0s;
position: absolute;
display: block;
overflow: hidden;
margin: 0px;
padding: 0px;
border-radius: 0px;
top: 0px;
width: 200px;
height: 150px;
}

.wonderplugin-gridgallery-item-container {
display: block;
position: relative;
overflow: hidden;
text-align: center;
margin: 0px;
width: 200px;
height: 150px;
}

.wonderplugin-gridgallery-item-img {
position: relative;
width: 210px;
height: 150px;
max-width: none;
max-height: none;
margin-top: 0px;
margin-left: -5px;
opacity: 1;
display: inline-block;
}

</style>

请让我知道如何在可能的情况下通过JavaScript删除重复的div。

谢谢。

0 个答案:

没有答案