Question

我有一个JSON请求，可以在div中动态构建搜索结果。搜索结果中包含以＆＃34; lid＆＃34;开头的重复类。如何动态查找重复的类并删除除一个之外的所有类？

<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
            }
        }
    }
}

Answer 1

你可以循环每个div的类并测试是否有任何类名以lid开头，然后如果有带有该类的元素删除它，则将其存储在对象中。

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>

Answer 2

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

Answer 3

您喜欢的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]='';
            }
        });

    });

结果将是：1 2 3 五 10 16 23 31

动态查找类并删除重复的div

3 个答案: