我正在研究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。
谢谢。