4

在我的网页上，我有一个“编辑器”类的 DIV，我将其复制到一个变量中。

editorTemplate = $('.editor');

DIV 看起来像这样（简化）：

<div class="editor">
  <div>
    Title: <span class="title" id="title">  the title goes here  </span><br />
    <select class="recording_list" id="recording_list">
      <option value="1">Pos 1</option>
      <option value="2">Pos 2</option>
      ...
    </select>
</div>  <!-- class=editor -->

稍后我想通过将其添加到页面来从该 div 创建一个系列：

$(editArea).append(editorTemplate);

到现在为止还挺好。

但我想在将编辑器模板粘贴到页面之前更改一些属性——比如字段的 ID、一些文本和选项框的选定元素。

我可以更改编辑模板的 ID

$(myEdit).attr("id", "edit" + nEditors);

但我不知道如何访问模板的内部元素，例如“标题”字段的 ID 和文本。

模板粘贴到页面后，我可以说

$('#title').attr("id", "title" + nEditors);
$('#title').html("the new text");
...

在我将模板粘贴到页面之前是否可以进行这些更改？

4

4 回答 4

4

您可以使用JQuery.children()方法。

var editorTemplate = $('.editor');
editorTemplate.children('<selectors to uniquely identify the child object>').<method to update the content accordingly>

那么我们可以做这样的事情......

count=1;
editorTemplate.children('span#title').html('<Update HTML here>').attr('id','title_'+count);

更新：

我刚刚注意到您的元素位于多个级别，因此使用.find()将是理想的，因为它也可以遍历多个级别以选择后代元素（孙子等）。

于 2013-02-03T18:13:03.360 回答
4

您没有将元素复制到变量中。

editorTemplate = $('.editor');

上面创建了一个带有一组指向 DOM 元素的指针的 jQuery 包装器。包装器允许您执行针对 DOM 元素的 jQuery 方法。

如果您这样做editorTemplate.find("#title").attr("id", "newId")，它会更改id您当前在 DOM 中指向的元素的属性，而不是新副本。

当您计划稍后执行此操作时：

$(editArea).append(editorTemplate);

上述内容不会附加 DOM 元素的新副本，而是将moving您通过包装器指向的元素从它们在 DOM 中的原始位置指向正在引用editorTemplate的 DOM 中的新位置。editArea

如果您打算在其中复制某些元素editorTemplate以稍后附加它们，您将使用 jQuery clone()，类似于以下内容：

// use clone(true, true) to also clone any attached events
var editorTemplate = $('.editor').clone();

// Using .find you can change attribute in your new copy/clone
editorTemplate.find("#title").attr("id", "title" + nEditors).html("the new text");

// append your new copy/clone
$(editArea).append(editorTemplate);
于 2013-02-03T18:26:09.343 回答
1

您可以使用 find 方法来访问您的元素：

var editorTemplate = $('.editor');

$(editorTemplate).find('#title').attr('id', 'title' + nEditors).html('the new text');
于 2013-02-03T18:08:05.243 回答
1 
editorTemplate.clone()
              .attr({})
              .find("select").attr({id:"whatever"}).end()
              .find("span").....end()
              .appendTo($(editarea))

我希望你明白

于 2013-02-03T18:10:23.090 回答