jQuery select first object from same class name

Question

there are some lists that has same classes. I want to show the first element from the lists

<ul class="datas">
    <li class="data-smh1">abc</li>
    <li class="data-smh1">dd</li>
    <li class="data-smh1">cc</li>
    <li class="data-sc33">abc</li>
    <li class="data-sc33">dd</li>
    <li class="data-nn61">abc</li>
    <li class="data-nn61">dd</li>
</ul>

result:

<ul class="datas">
    <li class="data-smh1">abc</li>
    <li class="data-sc33">abc</li>
    <li class="data-nn61">abc</li>
</ul>

I tried $('class[name^="data-"]', but I couldn`t find any solutions.
Any help, thanks.

http://stackoverflow.com/questions/10558923/jquery-remove-duplicated-element http://stackoverflow.com/questions/2822962/jquery-remove-duplicate-elements — rahularyansharma, Apr 06 '13 at 03:12

score 5 · Accepted Answer · answered Apr 06 '13 at 03:35

5

Try

$(function(){
    $('.datas').children().each(function(i, v){
        var $this = $(this);
        $this.siblings('.' + $this.attr('class')).remove()
    });
})

Demo: Fiddle

answered Apr 06 '13 at 03:35

Arun P Johny

384,651
66
527
531

rahularyansharma · Answer 2 · 2013-04-06T03:27:14.920

0

<ul class="datas">
    <li class="data-smh1">abc</li>
    <li class="data-smh1">dd</li>
    <li class="data-smh1">cc</li>
    <li class="data-sc33">abc</li>
    <li class="data-sc33">dd</li>
    <li class="data-nn61">abc</li>
    <li class="data-nn61">dd</li>
</ul>

JQUERY

$(document).ready(function(){
    var seen = {};
    $('.datas li').each(function(){
    //alert($(this).text());
    var txt = $(this).attr('class');
     if (seen[txt])
        $(this).remove();
    else
        seen[txt] = true;

    })
  });

result

<ul class="datas">
    <li class="data-smh1">abc</li>


    <li class="data-sc33">abc</li>

    <li class="data-nn61">abc</li>

</ul>

JSFILDDEL LINK

edited Apr 06 '13 at 03:27

answered Apr 06 '13 at 03:21

rahularyansharma

11,156
18
79
135

You copied http://stackoverflow.com/questions/2822962/jquery-remove-duplicate-elements – Jashwant Apr 06 '13 at 03:30
i just use that logic but that is for duplicate element and this is for duplicate class name .. because all elements are same in result and one more thing i posted that link first in comment, after that i make this solution in jsfiddle. – rahularyansharma Apr 06 '13 at 03:32

score 0 · Answer 3 · answered Apr 06 '13 at 03:43

you could try this:

$(document).ready(function(){
    var curr_class = '';
    var ctr = 0;    

    $('.datas li').each(function(){
        if (curr_class !== $(this).prop('class')){
            curr_class = $(this).prop('class');
            ctr = 0;
        }
        if (ctr !== 0 ){
            $(this).remove();
        }
        ++ctr;
    });

});

jsFiddle

jQuery select first object from same class name

3 Answers3