Идентификаторы дубликатов jQuery

У меня есть элемент HTML с большой коллекцией неупорядоченных списков, содержащихся в нем. Мне нужно клонировать этот элемент, чтобы разместить в другом месте страницы, добавив разные стили (это достаточно просто, используя jQuery).

$("#MainConfig").clone(false).appendTo($("#smallConfig"));

Однако проблема заключается в том, что все списки и связанные с ними элементы списка имеют идентификаторы, а clone дублирует их. Есть ли простой способ заменить все эти повторяющиеся идентификаторы с помощью jQuery перед добавлением?

Ответ 1

Если вам нужен способ ссылки на элементы списка после их клонирования, вы должны использовать классы, а не идентификаторы. Измените все id = "..." на class= "..."

Если вы имеете дело с устаревшим кодом или чем-то и не можете изменить идентификаторы для классов, вы должны удалить атрибуты идентификатора перед добавлением.

$("#MainConfig").clone(false).find("*").removeAttr("id").appendTo($("#smallConfig"));

Просто помните, что у вас больше нет возможности ссылаться на отдельные элементы.

Ответ 2

Поскольку OP запросил способ заменить все дубликаты идентификаторов до их добавления, возможно, что-то вроде этого будет работать. Предполагая, что вы хотите клонировать MainConfig_1 в блоке HTML, например:

<div id="smallConfig">
    <div id="MainConfig_1">
        <ul>
            <li id="red_1">red</li>
            <li id="blue_1">blue</li>
        </ul>
    </div>
</div>

Код может выглядеть примерно так: найти все дочерние элементы (и потомки) клонированного блока и изменить их идентификатор с помощью счетчика:

var cur_num = 1;    // Counter used previously.
//...
var cloned = $("#MainConfig_" + cur_num).clone(true, true).get(0);
++cur_num;
cloned.id = "MainConfig_" + cur_num;                  // Change the div itself.
$(cloned).find("*").each(function(index, element) {   // And all inner elements.
    if(element.id)
    {
        var matches = element.id.match(/(.+)_\d+/);
        if(matches && matches.length >= 2)            // Captures start at [1].
            element.id = matches[1] + "_" + cur_num;
    }
});
$(cloned).appendTo($("#smallConfig"));

Чтобы создать новый HTML, выполните следующие действия:

<div id="smallConfig">
    <div id="MainConfig_1">
        <ul>
            <li id="red_1">red</li>
            <li id="blue_1">blue</li>
        </ul>
    </div>
    <div id="MainConfig_2">
        <ul>
            <li id="red_2">red</li>
            <li id="blue_2">blue</li>
        </ul>
    </div>
</div>

Ответ 3

$("#MainConfig")
    .clone(false)
    .find("ul,li")
    .removeAttr("id")
    .appendTo($("#smallConfig"));

Попробуйте это для размера.:)

[Изменить] Исправлено для комментария redsquare.

Ответ 4

Я использую что-то вроде этого: ... $( "#" ) Подробно клон() атр ( 'ID', 'details_clone') после того, как ( "h1" ) шоу();.

Ответ 5

Это основано на ответе Рассела, но немного более эстетичном и функциональном для форм. JQuery:

$(document).ready(function(){
   var cur_num = 1;    // Counter

    $('#btnClone').click(function(){

          var whatToClone = $("#MainConfig"); 
          var whereToPutIt = $("#smallConfig");

          var cloned = whatToClone.clone(true, true).get(0);
          ++cur_num;
          cloned.id = whatToClone.attr('id') + "_" + cur_num;                  // Change the div itself.

        $(cloned).find("*").each(function(index, element) {   // And all inner elements.
          if(element.id)
          {
              var matches = element.id.match(/(.+)_\d+/);
              if(matches && matches.length >= 2)            // Captures start at [1].
                  element.id = matches[1] + "_" + cur_num;
          }
          if(element.name)
          {
              var matches = element.name.match(/(.+)_\d+/);
              if(matches && matches.length >= 2)            // Captures start at [1].
                  element.name = matches[1] + "_" + cur_num;
          }

         });

       $(cloned).appendTo( whereToPutIt );

    });
});

Разметка:

<div id="smallConfig">
    <div id="MainConfig">
        <ul>
            <li id="red_1">red</li>
            <li id="blue_1">blue</li>
        </ul>
      <input id="purple" type="text" value="I'm a text box" name="textboxIsaid_1" />
    </div>
</div>

Ответ 6

FWIW, я использовал функцию Dario, но мне нужно было также уловить метки меток.

Добавьте другой оператор if, чтобы сделать это:

if(element.htmlFor){
var matches = element.htmlFor.match(/(.+)_\d+/);
if(matches && matches.length >= 2)            // Captures start at [1].
  element.htmlFor = matches[1] + "_" + cur_num;
}

Ответ 7

Если у вас будет несколько похожих элементов на странице, лучше использовать классы, а не идентификаторы. Таким образом, вы можете применять стили к uls внутри разных контейнеров.

Ответ 8

Я считаю, что это лучший способ

var $clone = $("#MainConfig").clone(false);
$clone.removeAttr('id'); // remove id="MainConfig"
$clone.find('[id]').removeAttr('id'); // remove all other id attributes
$clone.appendTo($("#smallConfig")); // add to DOM.

Ответ 9

Вот решение с идентификатором.

var clone = $("#MainConfig").clone();
clone.find('[id]').each(function () { this.id = 'new_'+this.id });
$('#smallConfig').append(clone);

если вы хотите динамически установить идентификатор, вы можете использовать счетчик вместо "new_".