Question

我有一个HTML元素，其中包含大量无序列表。我需要克隆这个元素放在页面的其他地方添加不同的样式（这很简单，使用jQuery）。

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

但问题是，所有列表及其关联的列表项都有ID，clone重复这些列表。是否有一种简单的方法可以在追加之前使用jQuery替换所有这些重复的ID？

Answer 1

如果您需要在克隆它们之后引用列表项，则必须使用类，而不是ID。将所有id =“...”更改为class =“...”

如果您正在处理遗留代码或某些内容而无法将ID更改为类，则必须在追加之前删除id属性。

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

请注意，您无法再引用单个项目了。

Answer 2

由于OP要求在添加之前替换所有重复的id的方法，可能这样的事情会起作用。假设您想要在HTML块中克隆MainConfig_1，例如：

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

代码可能类似于以下内容，以查找克隆块的所有子元素（和后代），并使用计数器修改其ID：

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>

Answer 3

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

试试大小。：）

[编辑]修正了redsquare的评论。

Answer 4

我使用这样的东西：。$（ “＃方式”）的克隆（）ATTR（ '编号'， 'details_clone'）后（ “H1”）显示（）;

Answer 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>

Answer 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;
}

Answer 7

如果页面上有几个类似的项目，最好使用类，而不是ID。这样你就可以在不同的容器id中将样式应用于uls。

Answer 8

我相信这是最好的方式

template <class T>
public ref class native_shared_ptr
{
public:
    native_shared_ptr()
    {
        _spNative = new boost::shared_ptr<T>;
    }
    native_shared_ptr(const native_shared_ptr<T>% rhs)
    {
        _spNative = new boost::shared_ptr<T>;
        *this = rhs;
    }
    native_shared_ptr(const boost::shared_ptr<T>% rhs)
    {
        _spNative = new boost::shared_ptr<T>( rhs );
    }
    ~native_shared_ptr()
    {
        reset();
    }
    void reset()
    {
        delete _spNative;
        _spNative = nullptr;
    }
    T* operator->()
    {
        return _spNative->get();
    }
    operator bool()
    {
        return _spNative && *_spNative;
    }
    void operator=(const native_shared_ptr<T>% rhs)
    {
        *_spNative = *rhs._spNative;
    }
    void operator=(const boost::shared_ptr<T>% rhs)
    {
        *_spNative = rhs;
    }
protected:
    !native_shared_ptr()
    {
        reset();
    }
private:
    boost::shared_ptr<T>* _spNative;
};

Answer 9

这是ID为的解决方案。

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

如果要动态设置ID，则可以使用counter代替“ new _”。

jQuery克隆重复ID

9 个答案: