How can I find out what div a div is in with javascript?

Question

I have a page which will contain 4 static divs with IDs. I will be adding scriptaculous dragable and droppable effects to allow interaction by moving many dynamically generated divs from one div to another.

I need to be able to find out which of the static divs the dynamic divs are in. How can I get this information?

Answer 1

Since you're planning to use Scriptaculous, you can do this easily with Prototype:

if ($("dynamicElement").descendantOf("staticElement"))
{

}

Answer 2

Hi,

as far as i understand your question you want to find all childs (or all child divs) of a known element ?

as you use scriptaculous you might use the childElements method from prototype. see http://prototypejs.org/api/element/childElements for details.

welcome to stackoverflow.

Answer 3

Commenters above note Scriptaculous methods to do this, but it's always worth knowing how to perform basic DOM manipulation of this manner without crutches. This code is untested but certainly extremely close to what you'd want to use:

/**
 * Finds the ancestor div element of descendantDiv which has one of
 * the given array of ids.  If multiple div elements have with the
 * given ids are ancestors of descendantDiv, the most closely related
 * one (i.e. parent preferred to grandparent) is returned.  If no
 * ancestor of descendantDiv is a div element with one of the ids
 * given by ids, returns null.
 *
 * @param descendantDiv : HTMLDivElement
 *   the div element whose containing div with one of the provided
 *   ids is to be determined
 * @param ids : [string]
 *   array of ids which the desired ancestor div might have
 * @returns HTMLDivElement
 *   the first parent, grandparent, etc. div element of descendantDiv
 *   which has an id contained in ids
 */
function findAncestorDivWithId(descendantDiv, ids)
{
  for (var parent = descendantDiv.parentNode;
       parent;
       parent = parent.parentNode)
  {
    if (parent.nodeName.toLowerCase() !== "div")
      continue;
    for (var i = 0, sz = ids.length; i < sz; i++)
    {
      if (parent.id === ids[i])
        return parent;
    }
  }
  return null;
}