Блог

Главная - Вопросы по программированию - Удалить , которые имеют то же значение в другом

Удалить , которые имеют то же значение в другом

#javascript

#javascript

Вопрос:

Если бы было два <ul> ‘s, один вызываемый list_a , а другой вызываемый list_b , с использованием javascript и без использования каких-либо библиотек, таких как jQuery, как бы вы удалили <li> ‘s в list_a , которые имеют то же значение, что и в list_b ?

Вот пример HTML:

   <ul id="list_a">
    <li value="1">list_a_0</li>
    <li value="8">list_a_8</li>
    <li value="9">list_a_9</li>
  </ul>

  <ul id="list_b">
    <li value="8">list_b_8</li>
    <li value="9">list_b_9</li>
    <li value="2">list_b_2</li>
  </ul>

Конечный результат должен быть:

   <ul id="list_a">
    <li value="1">list_a_0</li>
    <!-- DELETED TWO <li>'s -->
  </ul>

  <ul id="list_b">
    <li value="8">list_b_8</li>
    <li value="9">list_b_9</li>
    <li value="2">list_b_2</li>
  </ul>

Javascript, который я пока могу создать (который не работает):

 window.onload=function()
{
  init();

  function init()
  {
    var listA = document.getElementById("list_a");

    for(var i in listA.childNodes)
    {
      var x = listA.childNodes[i];
      var listB = document.getElementById("list_b");

      for(var j in listB.childNodes)
      {
        var y = listB.childNodes[j];
        if(x.innerHTML == y.innerHTML)
          listA.removeChild(listA);
      }
    }          
  }  
}

Спасибо!

Комментарии:

1. listA.removeChild(listA); должно быть listA.removeChild(x); , я считаю. Похоже, этого должно быть достаточно. Хотя… .innerHTML никогда не будет одинаковым, потому что содержимое элементов списка отличается. Попробуйте сравнить их .value вместо, посмотрите, соответствует ли это вашим потребностям.

2. Мне любопытно, какой вариант использования для этого. Это можно сделать, но ваша проблема явно лежит в другом месте (почему вы должны исправлять это в JS)!

3. Не используйте innerhtml, используйте textnode и его значение. Кроме того, просто сохраните хэш встречающихся значений, если значение уже существует, затем удалите этот узел и перейдите к следующему.

Ответ №1:

ДЕМОНСТРАЦИЯ: http://jsfiddle.net/rmXrZ/

 window.onload = function() {

    var listA = document.getElementById("list_a");
    var listB = document.getElementById("list_b");

    for (var i = 0; i < listA.children.length; i  ) {
        var x = listA.children[i];

        for (var j = 0; j < listB.children.length; j  ) {
            var y = listB.children[j];
            if (x.value == y.value) {
                listA.removeChild(x);
                i--;
            }
        }
    }
}

  • Не используйте for-in для итерации числовых индексов

  • Кэшируйте выбор DOM вместо повторного выбора в цикле

  • Используйте .children вместо .childNodes , чтобы избежать текстовых узлов между элементами

  • Сравнить .value вместо .innerHTML

  • Удалить x вместо listA

  • Когда элемент удаляется из listA , уменьшите i , потому что удаление из DOM означает удаление из .children коллекции.

Ответ №2:

   function init() {
    var listA = document.getElementById("list_a");
    var listB = document.getElementById("list_b");

    for(var i =0; i<listA.children.length;i  ) {
      var x = listA.children[i];

      for(var j in listB.children) {      
        var y = listB.children[j];
        if(x.value == y.value)
           x.parentNode.removeChild(x);
      }
    }          
  }

Избегайте попадания в DOM несколько раз, также в этом случае дочерние элементы — лучший выбор данных.