Geek Answers Handbook

How to access div subelements that are copied to a variable

On my webpage, I have a div of the "editor" class, which I copy to 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 this div by adding it to the page:

 $(editArea).append(editorTemplate);

So far so good.

But I want to change some attributes - for example, field identifiers, some text and the selected item in the selection field - before inserting the editor template on the page.

I can change the id of the edit template with

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

But I do not know how to access the elements of the INNER template, for example. ID and text of the "title" field.

After the template is inserted on the page, I can say

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

Is it possible to make these changes BEFORE I embed the template on the page?

+4
source share
4 answers

You can use the jQuery.children () method.

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

So, we could do something like this ...

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

UPDATE:

I noticed that your elements are on several levels, therefore . find () would be ideal as it can traverse multiple levels to select descendant elements (grandchildren, etc.).

+4
source

You do not copy elements to a variable.

 editorTemplate = $('.editor');

The above example creates a jQuery wrapper with a set of pointers that point to DOM elements. The wrapper allows you to execute jQuery methods for DOM elements.

If you execute editorTemplate.find("#title").attr("id", "newId") , this changes the id attribute of the element that you are currently pointing to in the DOM, not the new copy.

When you plan to do this later:

 $(editArea).append(editorTemplate);

The above will not add a new copy of the DOM elements, but will be the moving elements that you specify through the editorTemplate wrapper, from their original location in the DOM, to the new location in the DOM editArea referenced.

If you plan to duplicate some elements in the editorTemplate to add them later, you should use jQuery clone() , similar to this:

 // 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);
+4
source

You can use the find method to access your elements:

 var editorTemplate = $('.editor'); $(editorTemplate).find('#title').attr('id', 'title' + nEditors).html('the new text');
+1
source 
 editorTemplate.clone() .attr({}) .find("select").attr({id:"whatever"}).end() .find("span").....end() .appendTo($(editarea))

I hope you get the idea

+1
source

More articles:


All Articles