Ottenere elemento figlio senza ID esplicito

[Luca_pluatrco]

Ciao,

data la seguente struttura come posso fare per ottenere l'elemento <div> figlio di[*] allo scatenarsi dell'evento onmouse over?

<td>
<ul>
	<li onmouseover="getPositoin(this)">
		[img]junction.gif[/img]
		<div> 
		   <ul>
			[*]
			 ...
			 
		[/list]
	   </div>
   [/list]
</td>
<td>
<ul>
	<li onmouseover="getPositoin(this)">
		[img]junction.gif[/img]
		<div> 
		   <ul>
			[*]
			 ...
			 
		[/list]
	   </div>
   [/list]
</td>

Complicazioni nascono dal fatto che non posso assegnare staticamente id univoci in quanto gli elementi vengon creati in modo dinamico e sono presenti in vari punti della pagina.

Il mio obiettivo è poter ottenere l'emento <div> (relativo al[*] padre che ha avviato onmouseover) in modo da poter modificarne gli attributi.

Grazie

[artorius]

fai così:

var getPositoin = function(elem){
   var divElement = null;
   for(c = elem.firstChild; c != null; c = c.nextSibling){
      if(c.nodeType == 1){ //nodeType == 1 significa che è un Element
         if(c.tagName.toLowerCase() == 'div'){ //Ho messo il toLowerCase perché alcuni browser li mettono in maiuscolo
             divElement = c;
             break;
         }
      }
   }
   //A questo punto in divElement c'è il primo div figlio di elem 
}

[Xinod]

il primo div figlio di this e'
this.getElementsByTagName('div')[0];

chiaramente valuta il caso:
se this puo' non avere almeno un div trai figli parlare direttamente dell' elemento 0 di un' htmlCollection di div che non esiste generera' un errore...

ciao

[Luca_pluatrco]

Grazie per i consigli.

Uso il seguente codice in modo da posizionare in modo assoluto il div in questione, ma non funziona, viene posizionato in fondo alla pagina.

C'è qulahce errore nel codice?

function findPos(obj) {

   var curleft = curtop = 0;

    if (obj.offsetParent) 
    {
        do {
		        curleft += obj.offsetLeft;
		        curtop += obj.offsetTop;
            } while (obj = obj.offsetParent);
    }

     
       var innerDiv = obj.getElementsByTagName('div')[0];
       
       if(!innerDiv.hasChildNodes())
       {
       return;
       }
       
       curtop = curleft = 0;
       
       innerDiv.style.top = curtop+ 'px';
       innerDiv.style.left = curleft+ 'px';


       innerDiv.setAttribute('position', 'absolute');
       innerDiv.setAttribute('top', curtop);
       innerDiv.setAttribute('left', curleft);    

}

Grazie

[Xinod]

cos' e' questo?
innerDiv.setAttribute('position', 'absolute');
innerDiv.setAttribute('top', curtop);
innerDiv.setAttribute('left', curleft);

stavi facendo bene poco prima settando gli attributi di stile via style,
manca innerDiv.style.position='absolute';

[Luca_pluatrco]

Anche usando:

  
            innerDiv.style.position = "absolute";
           innerDiv.style.top = curtop+ 'px';
           innerDiv.style.left = curleft+ 'px';

Il risultato non cambia.

In IE mi genera un'eccezione dicendo che:

var innerDiv = obj.getElementsByTagName('div')[0];

è required...ma ho controllato da codice e[*] relativo contiene un figlio <div>

[artorius]

è una cosa che ho già notata, ma IE non implementa sempre getElementsByTagName su tutti gli elementi. In ogni caso, la mia soluzione dovrebbe funzionare con tutti i browser.

[Luca_pluatrco]

Ho dei problemi anche utilizzando la tua soluzione artorius. In IE mi viene genarata un'eccezione "Object required" in prossimità dell'assegnamento: c = obj.firstChild, come sorta di prova aggiuntiva applico un alert al termine della funzione che tuttavia viene ignorato.

Se invece commento tutto tranne che il codice relativo al reperimento delle coordinate (primo if) allora viene eseguito e non vengono lanciate eccezioni di alcun tipo.

function findPos(obj) {

	var curleft = curtop = 0; 
	var innerDiv = null;
	
    if (obj.offsetParent) 
    {
        do {
		        curleft += obj.offsetLeft;
		        curtop += obj.offsetTop;
            } while (obj = obj.offsetParent);
    }     
  
  
  if(obj.hasChildNodes())   
  {
       for(c = obj.firstChild; c != null; c = c.nextSibling)
       {
          if(c.nodeType == 1) //nodeType == 1 significa che è un Element
          {
             if(c.tagName.toLowerCase() == 'div')
             { 
                 innerDiv = c;
                 break;
             }
          }
       }   
   }

   innerDiv.style.position = "absolute";
   innerDiv.style.top = (curtop - 80)+ 'px !important';
   innerDiv.style.left = (curleft - 420)+ 'px !important';

   alert("Position X: " + posx + " Y: " + posy);

//-------------------------------------------------------------------------------------

<div class="menu WPActionMenu">
  <ul>
       <li onmouseover="findPos(this)">
	    <input name="ctl00$WPA" title="Delete" src="Link-16.gif" type="image">
       
	<li onmouseover="findPos(this)">
	     [img]junction.gif[/img]
            
           /*QUESTO E' IL DIV CHE VOGLIO POSIZIONARE*/ 
            <div>
                <ul>
                   <li onmouseover="findPos(this)">
		      <input name="ctl00$WPA" title="Edit" src="edit-16.gif" type="image">
                      Edit
                   
                   <li onmouseover="findPos(this)">
		      <input name="ctl00$WP" title="Delete" src="delete-16.gif" type="image">
                      Delete
                    						[/list]
             </div>

         [/list]
 </div>

[artorius]

scusa, ma hai visto il while???

while (obj = obj.offsetParent);

[Luca_pluatrco]

Si, non è una svista. Ho usato il codice trovato a questo articolo.

Ho anche provato ad usare il seguente codice (che funziona in un altra parte del sito):

  while(obj!= null) {   
    curleft += obj.offsetLeft;   
    curtop += obj.offsetTop;   
    obj = obj.offsetParent;

Ma di nuovo ho un'eccezione lanciata in IE al punto obj.offsetParent dove dice "Object Required" e di nuovo l'alert non è eseguito.

Inizio a disperare, seppura la cosa non mi sembrava cosi' difficile. Il drop down menu in FF viene visualizzato un po' in basso a destra rispetto al punto in cu iviene scatenato l'onmouseover.
Tuttavia anche modificando le coordinate calcolate in modo da posizionarlo come voglio io nulla succede. Probabilmente per via di questa eccezione di fondo il codice non viene eseguito del tutto (come lo dimostra anche l'alert che vienen ignorato).