How to access subitems of a div that's copied to a variable

Question

On my webpage I have a DIV of the class "editor" that I copy into a variable.

editorTemplate = $('.editor');

The DIV looks like this (simplified):

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

Later I want to create a series from that div by adding it to the page:

$(editArea).append(editorTemplate);

So far so good.

But I want to change some attributes - like the IDs of the fields, some text and the selected element of the option box - before pasting the editor template onto the page.

I can change the ID of the edit template with

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

But I don't know how to access the INNER elements of the template, e.g. the ID and the text of the "title" field.

After the template is pasted into the page I can say

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

Is it possible to make these changes BEFORE I paste the template into the page?

Answer 1

You can make use of the JQuery.children() method.

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

So then we could do something like this...

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

---

UPDATE:

I just noticed that your elements are at multiple levels so using .find() would be ideal as it can traverse down multiple levels to select descendant elements (grandchildren, etc.) as well.