I am having some problems with DOM, I know this is not exactly on the topic going on here but please Can anyone help me?

I let the user create images and buttons (a button with image above it)by clicking on a button: “new_a_window” so I use append() in jQuery. But the question is that I have to get the different image as the user press on it.

As the user click the “new_a_window” button, jQuery will create a button with a image in a jDialog(story_pages).

$( ‘#new_a_window’).bind(‘click’,function(){
$(‘#story_pages’).append(‘

‘);
window_value= window_value+1; // I give each of the images a unique integer value
// since of the value is the index of a image array.
})

I have to implement the scenario:

As the user presses on the image button, I can get the image’s value. However, after appending the code snippet above, each image’s value is “window_value”, I can’t select it by value. How can I do?

Please help me…… 🙁

NodeList nl = doc.getElementsByTagName(“mytag”);
for(int i = 0, n = nl.getLength(); i < n; i++) {
Element elt = (Element) nl.item(i);
if(…) {
elt.getParentNode().removeChild(elt);
}
}
The problem was that NodeLists are live, and removing elements while iterating changes the indexes. When I tried to retrieve an element past the end, nl.item(i) returned null. Even changing the loop to this wouldn’t fix it: for(int i = 0; i < nl.getLength(); i++). The problem then is that if element i is removed, the element that was at index i+1 is now at index i and won’t be checked. I ended up using this code:

NodeList nl = doc.getElementsByTagName("mytag");
for(int i = 0, n = nl.getLength(); i < n; i++) {
Element elt = (Element) nl.item(i);
if(…) {
elt.getParentNode().removeChild(elt);
i–;
n–;
}
}
Please correct me. 🙂

Now I’m working on a rather large application for an insurance firm with hundreds of form fields. When we started, the DOM held state. “Is the field visible? Ask the field $(“#blah”).isVisible().” With a very complicated DOM structure and complex business logic, this style of app just wouldn’t perform. Once we treated the DOM like a slow, clunky database and used a fast state control layer in memory to filter “reads and writes” we performed much better. If the field is already visible, don’t invoke jQuery to call visible(). Once we made this view-model layer, we realized we didn’t need sizzle anymore and the app got even faster.

Go with MVVM, it’s the right choice but you won’t really see the difference until the app has to scale.

In that final example regarding the active flag, the use of .data() is much better in that when the div is removed the data will disappear with it, automagically. Imagine each div represents a comment in a large and ever-changing comment stream. What is the lifetime of the closure variable?

Imagine the div is instead a textarea, and instead of a custom active variable we use the DOM’s built-in disabled property to manage state and CSS to manage appearance. Is that still bad? Do we really need to create an entire JavaScript object to manage a variable that mirrors the state of the DOM property?