动态查找类并删除重复Div

我有一个JSON请求，该请求在Divs中动态构建搜索结果。搜索结果具有重复的类别，其中包括"盖子"。我如何动态地找到重复的类并删除除一个外的全部？

<class="SEARCHRESULTS">
<div class="col-lg-3 col-md-3 col-sm-3 product lid28042017122508"></div>
<div class="col-lg-3 col-md-3 col-sm-3 product lid28042017123709"></div>
<div class="col-lg-3 col-md-3 col-sm-3 product lid02052017131308"></div>
<div class="col-lg-3 col-md-3 col-sm-3 product lid28042017122508"></div>
<div class="col-lg-3 col-md-3 col-sm-3 product lid02052017083951"></div>
<div class="col-lg-3 col-md-3 col-sm-3 product lid28042017123709"></div>
<div class="col-lg-3 col-md-3 col-sm-3 product lid02052017131308"></div>
<div class="col-lg-3 col-md-3 col-sm-3 product lid28042017122508"></div>
<div class="col-lg-3 col-md-3 col-sm-3 product lid02052017083951"></div>
<div class="col-lg-3 col-md-3 col-sm-3 product lid02052017131839"></div>
<div class="col-lg-3 col-md-3 col-sm-3 product lid28042017123709"></div>
<div class="col-lg-3 col-md-3 col-sm-3 product lid02052017131308"></div>
<div class="col-lg-3 col-md-3 col-sm-3 product lid28042017122508"></div>
<div class="col-lg-3 col-md-3 col-sm-3 product lid02052017083951"></div>
<div class="col-lg-3 col-md-3 col-sm-3 product lid02052017131839"></div>
<div class="col-lg-3 col-md-3 col-sm-3 product lid02052017132528"></div>
<div class="col-lg-3 col-md-3 col-sm-3 product lid28042017123709"></div>
<div class="col-lg-3 col-md-3 col-sm-3 product lid02052017131308"></div>
<div class="col-lg-3 col-md-3 col-sm-3 product lid28042017122508"></div>
<div class="col-lg-3 col-md-3 col-sm-3 product lid02052017083951"></div>
<div class="col-lg-3 col-md-3 col-sm-3 product lid02052017131839"></div>
<div class="col-lg-3 col-md-3 col-sm-3 product lid02052017132528"></div>
<div class="col-lg-3 col-md-3 col-sm-3 product lid03052017135708"></div>
<div class="col-lg-3 col-md-3 col-sm-3 product lid28042017123709"></div>
<div class="col-lg-3 col-md-3 col-sm-3 product lid02052017131308"></div>
<div class="col-lg-3 col-md-3 col-sm-3 product lid28042017122508"></div>
<div class="col-lg-3 col-md-3 col-sm-3 product lid02052017083951"></div>
<div class="col-lg-3 col-md-3 col-sm-3 product lid02052017131839"></div>
<div class="col-lg-3 col-md-3 col-sm-3 product lid02052017132528"></div>
<div class="col-lg-3 col-md-3 col-sm-3 product lid03052017135708"></div>
<div class="col-lg-3 col-md-3 col-sm-3 product lid02052017084808"></div>
</div>

我尝试过的

 var $elems = $('*[class^="lid"]')
var n = $elems.length;
for (var i = 0; i < n; ++i) {
    var el = $elems[i];
    if (el.parentNode) {  // ignore elements that aren't in the DOM any more
        var id = el.id;
        for (var j = i + 1; j < n; ++j) {
            var cmp = $elems[j];
            if (cmp.parentNode && (cmp.id === id)) {
                $(cmp).remove();  // use jQuery to ensure data/events are unbound
            }
        }
    }
}

您可以循环每个div的类，并测试任何类名称是否以 lid开头，然后如果有该盖子的元素ement ement ement ement ement ement emoke eles else else将其存储在对象中。

var seen = {}
$('.SEARCHRESULTS div').each(function() {
  var classes = $(this).attr('class').split(' ');
  var lid = classes.find(e => e.startsWith('lid'))
  if (lid) seen[lid] ? $(this).remove() : seen[lid] = 1;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="SEARCHRESULTS">
  <div class="col-lg-3 col-md-3 col-sm-3 product lid1">1</div>
  <div class="col-lg-3 col-md-3 col-sm-3 product lid2">2</div>
  <div class="col-lg-3 col-md-3 col-sm-3 product lid123">3</div>
  <div class="col-lg-3 col-md-3 col-sm-3 product lid1">4</div>
  <div class="col-lg-3 col-md-3 col-sm-3 product lid3">5</div>
  <div class="col-lg-3 col-md-3 col-sm-3 product asdflid123">6</div>
  <div class="col-lg-3 col-md-3 col-sm-3 product lid123">7</div>
  <div class="col-lg-3 col-md-3 col-sm-3 product asdflid123">8</div>
</div>

    var originalElements = [];
    var $elems = $('*[class^="lid"]')
    var n = $elems.length;
    for (var i = 0; i < n; ++i) {
        var el = $elems[i -1];
        if(originalElements.indexOf(el) === -1){
            originalElements.push(el);
        }else{
            $(el).remove();
        }
    }

您的UI喜欢

<class="SEARCHRESULTS">
<div class="col-lg-3 col-md-3 col-sm-3 product lid28042017122508">1</div>
<div class="col-lg-3 col-md-3 col-sm-3 product lid28042017123709">2</div>
<div class="col-lg-3 col-md-3 col-sm-3 product lid02052017131308">3</div>
<div class="col-lg-3 col-md-3 col-sm-3 product lid28042017122508">4</div>
<div class="col-lg-3 col-md-3 col-sm-3 product lid02052017083951">5</div>
<div class="col-lg-3 col-md-3 col-sm-3 product lid28042017123709">6</div>
<div class="col-lg-3 col-md-3 col-sm-3 product lid02052017131308">7</div>
<div class="col-lg-3 col-md-3 col-sm-3 product lid28042017122508">8</div>
<div class="col-lg-3 col-md-3 col-sm-3 product lid02052017083951">9</div>
<div class="col-lg-3 col-md-3 col-sm-3 product lid02052017131839">10</div>
<div class="col-lg-3 col-md-3 col-sm-3 product lid28042017123709">11</div>
<div class="col-lg-3 col-md-3 col-sm-3 product lid02052017131308">12</div>
<div class="col-lg-3 col-md-3 col-sm-3 product lid28042017122508">13</div>
<div class="col-lg-3 col-md-3 col-sm-3 product lid02052017083951">14</div>
<div class="col-lg-3 col-md-3 col-sm-3 product lid02052017131839">15</div>
<div class="col-lg-3 col-md-3 col-sm-3 product lid02052017132528">16</div>
<div class="col-lg-3 col-md-3 col-sm-3 product lid28042017123709">17</div>
<div class="col-lg-3 col-md-3 col-sm-3 product lid02052017131308">18</div>
<div class="col-lg-3 col-md-3 col-sm-3 product lid28042017122508">19</div>
<div class="col-lg-3 col-md-3 col-sm-3 product lid02052017083951">20</div>
<div class="col-lg-3 col-md-3 col-sm-3 product lid02052017131839">21</div>
<div class="col-lg-3 col-md-3 col-sm-3 product lid02052017132528">22</div>
<div class="col-lg-3 col-md-3 col-sm-3 product lid03052017135708">23</div>
<div class="col-lg-3 col-md-3 col-sm-3 product lid28042017123709">24</div>
<div class="col-lg-3 col-md-3 col-sm-3 product lid02052017131308">25</div>
<div class="col-lg-3 col-md-3 col-sm-3 product lid28042017122508">26</div>
<div class="col-lg-3 col-md-3 col-sm-3 product lid02052017083951">27</div>
<div class="col-lg-3 col-md-3 col-sm-3 product lid02052017131839">28</div>
<div class="col-lg-3 col-md-3 col-sm-3 product lid02052017132528">29</div>
<div class="col-lg-3 col-md-3 col-sm-3 product lid03052017135708">30</div>
<div class="col-lg-3 col-md-3 col-sm-3 product lid02052017084808">31</div>
</div>

您的jQuery如下：

//Use jquery dependency 
    console.log($('div').find('.product'));
    var myDiv = $('div');
    var inDiv = myDiv;
    myDiv.each(function( index ) {
        var myClassAttr = $( this ).attr('class');
        myDiv.each(function( inIndex ) {
            var inMyClassAttr = $( this ).attr('class');
          if(myClassAttr == inMyClassAttr && (index!=inIndex)){
            console.log('myClassAttr',myClassAttr ,'inMyClassAttr',inMyClassAttr , 'index',index,'inIndex',inIndex);
              $( this ).remove();
              myDiv[inIndex]='';
            }
        });
    });

结果将是：123510162331

相关内容

最新更新

热门标签：