Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Как удалить дубликаты из DOM? (https://javascript.ru/forum/jquery/34269-kak-udalit-dublikaty-iz-dom.html)

Shitbox2 27.12.2012 09:33
Как удалить дубликаты из DOM?
 
<div class="alert">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <span>Err1</span>
    <span>Err3</span>
    <span>Err2</span>
</div>

Есть область где отображаются ошибки. Есть массив error с текстами ошибок. В определенных ситуациях данные из массива error переносятся в область. Нужно, чтобы ошибки с одинаковым текстом не дублировались в области.

Копаю ф-ию $.unique(arr), но пока не получается.

Как запасной варинт $.grep(arr, filter), но он кажется более громоздким

Tek 27.12.2012 10:21
Я бы добавил в span класс в духе error_"id ошибки". При добавлении проверял существование класса если есть удаляем..

skfyann 27.12.2012 10:40
Цитата:
jQuery.unique( array )
arrayThe Array of DOM elements.
А не проще проверять, является ли элемент уникальным при добавлении в этот самый массив?

Shitbox2 27.12.2012 10:49
Цитата:
Сообщение от Tek (Сообщение 223795)
Я бы добавил в span класс в духе error_"id ошибки". При добавлении проверял существование класса если есть удаляем..
Не хочу перегружать второстепенный код дополнительными элементами. А учитывая, что тексты ошибок хранятся на сервере, придется id-шники через все скрипты протаскивать. Так что сравнение только по тексту.

Цитата:
Сообщение от skfyann (Сообщение 223798)
А не проще проверять, является ли элемент уникальным при добавлении в этот самый массив?
А вот не знаю... В любом случае, сохраненные элементы хранятся в самом доме (в тегах <span>) и их так же придется вытаскивать для сравнения

P.S. Можно сообщения, вообще, не в <span> хранить, а сплошным текстом, и искать в нем совпадения той же indexOf. Т.к. ситуации редкие, то код может быть каким угодно тормозным, главное, чтобы компактно было

Shitbox2 27.12.2012 13:24
Придумал решение
$('.alert').find('span').each(function () {
    errors.splice($.inArray(this.innerHTML, errors),1)
})

$.each(errors, function (k, v) {
    $('.alert').append('<span>' + v + '</span>. ')
})

Не очень нравится цикл добавления элемента. Хотелось бы как-то так
$('.alert').append('<span>'+ errors.join('</span>. <span>') + '</span>. ')
Но так добавляется мусор

Deff 27.12.2012 15:02 
<script src="http://code.jquery.com/jquery-latest.js"></script>

<div class="alert">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <span>Err1</span>
    <span>Err3</span>
    <span>Err2</span>
    <span>Err3</span>
    <span>Err2</span>
</div>

<script type="text/javascript">
var obj={};
$('div.alert > span:contains("Err")').each(function () {
  obj[$(this).html()]=$(this).remove();
});
for (var i in obj){
 $('div.alert').append((obj[i]))
};
</script>

рони 27.12.2012 18:49
Deff,
можно чуть покороче ...
<script src="http://code.jquery.com/jquery-latest.js"></script>
<div class="alert">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <span>Err1</span>
    <span>Err3</span>
    <span>Err2</span>
    <span>Err3</span>
    <span>Err2</span>
</div>
<script type="text/javascript">
var obj={};
$('div.alert > span:contains("Err")').each(function (i,el) {
  obj[$(el).html()]?$(el).remove():obj[$(el).html()]=!0;
});
</script>

Shitbox2 27.12.2012 20:46
А по-моему длиннее... У меня короче на строчку var obj={};

Deff 27.12.2012 21:11
Shitbox2, У рони один цикл - у Вас два.
Опять жа выложите полный вариант скрипта работающего в топике :)

Shitbox2 27.12.2012 23:57
Цитата:
Сообщение от Deff (Сообщение 223945)
Shitbox2, У рони один цикл - у Вас два.
Опять жа выложите полный вариант скрипта работающего в топике :)
Тот код, что выкладывал рабочий. Просто не умею делать так, чтобы его можно было запускать на сайте (как в ваших примерах).
Рони не указал добавление элементов.
for (var i in obj){
 $('div.alert').append((obj[i]))
};
Без этого у него получилось 4 строчки против моих трех
Или просто не понял его код...

Deff 28.12.2012 00:15
Цитата:
Сообщение от Shitbox2
Просто не умею делать так, чтобы его можно было запускать на сайте (как в ваших примерах).
[HTML run] тут код[/HTML]
Цитата:
Сообщение от Shitbox2
Рони не указал добавление элементов.
Он его просто не удаляет - если элемент последний - а так код полный и логика та же, что и у меня в моём примере

Shitbox2 28.12.2012 01:07
Эх. Обнаружил и у себя косяк, поэтому пришлось одну строчку добавить, так что мой код не короче. Вот работающий пример. Он показывает ошибки без дубликатов + продляет таймер. Собственно, по этим вопросам и тереблю форум целый день
<script src="http://code.jquery.com/jquery-latest.js"></script>
<button onclick="showErrors(['Ошибка 1'])">Ошибка 1</button>
<button onclick="showErrors(['Ошибка 1','Ошибка 2'])">Ошибка 1, Ошибка 2</button>
<button onclick="showErrors(['Ошибка 2','Ошибка 3'])">Ошибка 2, Ошибка 3</button>
<div id="cont"></div>
<script>
function showErrors(errors) {
    if (!$('#elem').length) {
        var $elem = $('<div id="elem"></div>').appendTo('#cont').each( function () {
            //Устанавливаем задержку перед удалением или продлеваем старую, если она была
            var el = $(this)
            el.data('reload', function () {
                clearTimeout(el.data('timer'))
                el.data('timer', setTimeout((function (elem) {
                    return function () { elem.remove() }
                })(el), 5000))
                return el
            })
            return this
        }).data('reload')()
    } else {
        var $elem = $('#elem').eq(0).data('reload')()
        //Удаляем дубликаты            
        $elem.find('span').each(function () { 
            var errDel = $.inArray(this.innerHTML, errors)
            if (errDel > -1) errors.splice(errDel,1)
        })
    }
    for (var i in errors) { $elem.append('<span>' + errors[i] + '</span>. ') }
}
</script>

Deff 28.12.2012 02:34 
<script src="http://code.jquery.com/jquery-latest.js"></script> 
<button onclick="showErr(this)">Ошибка 1</button>
<button onclick="showErr(this)">Ошибка 1, Ошибка 2</button>
<button onclick="showErr(this)">Ошибка 2, Ошибка 3</button>
<div id="cont"></div>
<script>

(function () {
 var Isx='<span>&. </span>',TimerId_00,OBJ={};
  return showErr = function (a) {
	errors=$(a).html().split(/,\s*/i);
	for (var i in errors) {OBJ[errors[i]]=Isx.replace('&',errors[i]);}
	clearTimeout(TimerId_00);TimerId_00=setTimeout(function(){OBJ={};$("#cont").html('')}, 5000);
	$("#cont").html('');
	for (var key in OBJ) {$("#cont").append(OBJ[key]);}
  }
}())
</script>



<script src="http://code.jquery.com/jquery-latest.js"></script>
<div id="but-wrp">
	<button>Ошибка 1</button>
	<button>Ошибка 1, Ошибка 2</button>
	<button>Ошибка 2, Ошибка 3</button>
</div>
<div id="cont"></div>

<script>
 (function () {
  var Isx='<span>&. </span>',TimerId_00,OBJ={};
  $("#but-wrp button").click(function () {
	errors=$(this).html().split(/,\s*/i);
	for (var i in errors) {OBJ[errors[i]]=Isx.replace('&',errors[i]);}
	clearTimeout(TimerId_00);TimerId_00=setTimeout(function(){OBJ={};$("#cont").html('')}, 5000);
	$("#cont").html('');
	for (var key in OBJ) {$("#cont").append(OBJ[key]);}
  });
}())
</script>

рони 28.12.2012 02:55
Shitbox2,
<script src="http://code.jquery.com/jquery-latest.js"></script>
<button onclick="showErrors(['Ошибка 1'])">Ошибка 1</button>
<button onclick="showErrors(['Ошибка 1','Ошибка 2'])">Ошибка 1, Ошибка 2</button>
<button onclick="showErrors(['Ошибка 2','Ошибка 3'])">Ошибка 2, Ошибка 3</button>
<div id="cont"></div>
<script>
function showErrors(err) {
    var a = $("#cont");
    clearTimeout(a.data("timer"));
    !a.data("obj") && a.data("obj", {});
    for (var d = a.data("obj"), b = 0; b < err.length; b++) d[err[b]] || (a.append("<span>" + err[b] + "</span>. "), d[err[b]] = !0);
    a.data({
        obj: d,
        timer: setTimeout(function () {
            a.removeData().empty()
        }, 5000)
    })
};
</script>

Deff, как-то странно ваш код работает в Internet Explorer или это только у меня...

Deff 28.12.2012 04:05
Цитата:
Сообщение от рони
Deff, как-то странно ваш код работает в Internet Explorer или это только у меня...
У меня тож(не проверил) Поправил - походу повторное клонирование в ИЕ кривит

Shitbox2 28.12.2012 04:35
Офигенно! Даже не думал, что можно так проще. Жаль, сайт не дает плюсовать уже

P.S.
Если так записать
var Isx='<span>#</span>',TimerId_00,OBJ={};
то, вообще, самый минимализм будет. Жаль, что переменные вынесены из функции

Не очень понял строчку
a.append("<span>" + err[b] + "</span>. "), d[err[b]] = !0
Что это за условие с запятой по середине?

Deff 28.12.2012 04:51
Цитата:
Сообщение от Shitbox2
Жаль, что переменные вынесены из функции
Поправил

рони 28.12.2012 07:30
Цитата:
Сообщение от Shitbox2
a.append("<span>" + err[b] + "</span>. "), d[err[b]] = !0Что это за условие с запятой по середине?
Оператор "запятая" вычисляет оба операнда и возвращает значение второго Как правило, он используется, когда хочется включить несколько выражений в то место, где должно быть одно.


Часовой пояс GMT +3, время: 12:44.