删除具有重复类的第一个元素对。每个类都有唯一的编号

时间:2017-10-18 12:51:47

标签: jquery html

我有一对具有相同班级编号的项目,我想删除该对中的第一项。

$('.itemid').each(function() {

    var currentclass = $.trim($(this).attr('class').replace('itemid', ''));

    if ($('.itemid.' + currentclass).length > 1) {
        $(this).remove();
    }
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="itemid 83"></div>
<div class="itemid 83"></div>

<div class="itemid 84"></div>
<div class="itemid 84"></div>

<div class="itemid 85"></div>
<div class="itemid 85"></div>

使用纯HTML可以很好地工作,但我不能让它在实际网站上工作。可能是因为div包含很多内容和子div?

没有jQuery错误,我可以使用像.addClass这样的简单函数来定位项目而没有任何问题。

我想到的另一件事 - 项目编号本身(83,84,85等)是由php生成的。但我可以毫无问题地定位$('.itemid.83').addClass('test');

也许有更好的解决方案?

2 个答案:

答案 0 :(得分:1)

所以,问题来自其他类可能不同的事实,我们必须先做一些处理才能选择好的项目。此代码将基于2个假设:

itemid将是选择所有项目的主要类(可以使用另一个类名,但所有元素都将具有此类,这将更容易)

itemid-{id}将是标识具有数字ID的每个项目的类,以查找重复项(同样,可以使用另一个前缀)

我让最后一个副本不能正常工作,我忘了在数字的开头添加'itemid-',但它实际上证明代码运行良好;)

$('.itemid').each(function() {
    
    //building an array of all classes
    var currentClasses = $(this).attr('class').split(' ');
    
    //extracting the class we want, there could be shorter methods but it's the end of the day here :p
    var i, l = currentClasses.length, stay = true, currentClass, found = false;
    for(i = 0; i < l && stay; i++){
        currentClass = currentClasses[i];
        //here a regex would be better, or else all classes beginning by 'itemid-' will be selected too
        if(currentClass.substring(0,7) === 'itemid-'){
            found = currentClass;
            stay = false;
        }
    }
    
    if (found !== false && $('.itemid.' + found).length > 1) {
        $(this).remove();
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dummyClass itemid itemid-83">83</div>
<div class="differentDummy itemid itemid-83">other 83</div>

<div class="dummyClass2 itemid itemid-84">84</div>
<div class="differentDummy2 itemid itemid-84">other 84</div>

<div class="dummyClass3 itemid itemid-85">85</div>
<div class="differentDummy3 itemid 85">other 85</div>

答案 1 :(得分:0)

<强>更新

更正仅删除第一个元素...

   var more_slass_array=[];

   $('.itemid').each(function(){
        var current_class_array=$(this).attr('class').split(' ');
        for(var key in current_class_array){
        	 var current_class=current_class_array[key];
        	 if(current_class!='itemid'){
        	 	 if(more_slass_array.indexOf(current_class)==-1){
        	 	 	more_slass_array.push(current_class);
        	 	 }
        	 }
        }
   });

   for(var key in more_slass_array){
   	  var current_class=more_slass_array[key];
   	  $('.'+current_class+':first').remove();
   }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


<div class="itemid 83">itemid 83 first</div>
<div class="itemid 83">itemid 83 next</div>
<div class="itemid 83">itemid 83 one more</div>

<div class="itemid 84">itemid 84 first</div>
<div class="itemid 84">itemid 84 next</div>

<div class="itemid 85">itemid 85 first</div>
<div class="itemid 85">itemid 85 next</div>
<div class="itemid 85">itemid 85 one more</div>