Få fat i div'er med prefix i id'et

I får lige nogle klikbare links:
http://www.digital-web.com/columns/keepitsimple/separating_behavior_and_structure.shtml
http://www.legestue.net/test.html

er det sådan her omtrent du mener ?

<script type="text/javascript">
window.onload = function findivs(){
elm = document.getElementsByTagName('DIV')

for (i=0;i<elm.length;i++){
  if(elm[i].id.indexOf("mitPrefix")!=-1){
  elm[i].onmouseover = new Function("alert('helledusseda')");
  }
}
}
</script>

<div id="mitPrefix1">hejsa</div>
<div id="mitPrefix2">weee</div>
<div id="mitPrefix2">davser</div>
<div id="ikkePrefix2">dooo</div>

Den skal måske endda strammes til:

  if(elm[i].id.indexOf("mitPrefix")==0){

-- når det nu er et prefix !-)

hehe, selvfølgelig har du ret roenving :o)

Jeg prøver at bruge lidt tid på at finde ud af hvad prefix egentligt betyder :o)

Eller måske suffix *rotflmao*

Det er netop sådan noget jeg søger efter. Egentlig skal onmouseover lyse et underelement til den aktuelle div op. Fx skal man, når man kører musen henover

<div id="element[tal]">
<ul id="adminbar[sammetal]"></ul>
</div>

Lyse adminbaren til elementet op. Jeg har fået følgende til at virke.

<script type="text/javascript">
window.onload = function findivs(){
elm = document.getElementsByTagName('div')

for (i=0;i<elm.length;i++){
  if(elm[i].id.indexOf("element")==0) {
  elm[i].onmouseover = function() { document.getElementById('adminbar438').style.display = 'inline'; }
    elm[i].onmouseout = function() { document.getElementById('adminbar438').style.display = 'none'; }
  }
}
}
</script>

Spørgsmålet er så, om jeg nu bare kan loope igennem de elementer, der er i den specifikke div, eller jeg simpelthen på en måde blot kan tage nummeret efter prefixet og kyle med?

PS. Jeg kan ikke være sikker på, at der fx kun er en ul!

Ved du, at du skal have fat i den første ul ?-)

this.childNodes[0] eller this.childNodes[1] vil give dig <ul>-elementet !-)

Ja, jeg ved, at jeg skal fat i den første, så jeg prøver lige med childNodes :)

eller fræse en for mere igennem :o)

<script type="text/javascript">
window.onload = function findivs(){
elm = document.getElementsByTagName('div')

for (i=0;i<elm.length;i++){
if(elm[i].id.indexOf("element")==0) {
  u = elm[i].getElementsByTagName('ul')
  for(j=0;j<u.length;j++){
  elm[i].onmouseover = new Function("document.getElementById('"+u[j].id+"').style.display = 'inline';")
  elm[i].onmouseout = new Function("document.getElementById('"+u[j].id+"').style.display = 'none';")
  }
}
}
}
</script>

Super, det virker simpelthen perfekt. Mange tak for hjælpen til jer begge. Smid lige nogle svar :)

>>grunk

Hvad er ideen med løkken ?-)

<script type="text/javascript">
window.onload = function findivs(){
  elm = document.getElementsByTagName('div')

  for (i=0;i<elm.length;i++){
    if(elm[i].id.indexOf("element")==0) {
      u = elm[i].getElementsByTagName('ul');
      elm[i].onmouseover = new Function("document.getElementById('"+u[0].id+"').style.display = 'inline';")
      elm[i].onmouseout = new Function("document.getElementById('"+u[0].id+"').style.display = 'none';")
    }
  }
}
</script>

-- og velbekomme '-)

Hvorfor bruger i new Function("[behavior]") i stedet for bare function() { [behavior] }

I øvrigt var jeg lidt for hurtigt til at sige, at det fungerede. Det var super i Mozilla, men i IE opførte min egen løsning sig helt mærkeligt. Nu har jeg forsøgt at implementere roenvings løsning, men før følgende fejl:

http://www.legestue.net/test.html

roenving troede netop at meningen var at der var flere ul's under hver div jvf. kommentar

PS. Jeg kan ikke være sikker på, at der fx kun er en ul!


derfor, men sikkert en stor TYK misforståelse :o)

Isolesen>> Sammenlign din linie mod vores :o)

elm[i].onmouseout = new Function("document.getElementById('"+u[j].id+"').style.display = 'none';")

function () { removeLight(elm[i]); document.getElementById('"+u[0].id+"').style.display = 'none'; }

i din linie vil du ikke kunne hive "udefra kommende" variabler ind i funktionen medmindre at du giver u en stor fed var foran :o)

Forskellen er ellers den samme og det kommer sikkert an på temperament :o)

Men netop derfor får du også den fejl du nu engang får da den ikke kan finde objektet :o)

prøv linien som enten mig eller roenving skrev den :o)

Grunken -> tak for forklaringen med function() ctr. new Function(). Havde ikke tænkte over det der med variablerne, men det beviser vist bare, at jeg ikke altid tænker :)

Ja, der kan være flere ul, men det er altid den første, der skal fremhæves. Derfor er roenvings løsning uden løkke vel smart nok?

Smid i øvrigt lige et svar!

Det virkede naturligvis, da jeg skrev jeres linie, men så ville jeg lige stoppe en ting mere ind i funktionen, hvor den skulle finde det med elm[], men det virkede ikke uanset om jeg skriver det uden for gåseøjnene eller indeni. Men jeg dummer mig sikkert bare igen?

<script type="text/javascript">
window.onload = function (){
elm = document.getElementsByTagName('div')

for (i=0;i<elm.length;i++){
  if(elm[i].id.indexOf("element")==0) {
    u = elm[i].getElementsByTagName('ul');
        document.getElementById(u[0].id).style.display = "none";
    elm[i].onmouseover = new Function(elm[i] + ".style.backgroundColor='#f4f4f4'; document.getElementById('"+u[0].id+"').style.display = 'inline';");
        elm[i].onmouseout = new Function(elm[i] + ".style.backgroundColor='#fff'; document.getElementById('"+u[0].id+"').style.display = 'none';");

  }
}
}
</script>


http://www.legestue.net/test.html

Problemet er at du ikke kan adressere via tankeoverføring ...

elm[i] på tidspunktet for udførelse af funktionen er 'noget', men når så funktionen skal udføres når eventet sker, er der ikke en ting, og den slags objekt-overførsel tror jeg ikke på, men måske:

<script type="text/javascript">
var elm;
window.onload = function (){
elm = document.getElementsByTagName('div')

for (i=0;i<elm.length;i++){
  if(elm[i].id.indexOf("element")==0) {
    u = elm[i].getElementsByTagName('ul');
        document.getElementById(u[0].id).style.display = "none";
    elm[i].onmouseover = new Function("elm["+i+"].style.backgroundColor='#f4f4f4'; document.getElementById('"+u[0].id+"').style.display = 'inline';");
        elm[i].onmouseout = new Function("elm["+i+"].style.backgroundColor='#fff'; document.getElementById('"+u[0].id+"').style.display = 'none';");

  }
}
}
</script>

Naturligvis. Mange tak for det. Jeg er i hvert fald blevet meget klogere, og nu er det vist lykkes mig at få hevet al min inlinestyling ud i et eksternt stylesheet. Det bliver brugt i et system, som jeg har til at ligge her:

http://www.legestue.net/websites/admin/login.php?username=usenet@legestue.net&password=usenet

Det ses i aktion, når man redigerer den enkelte side. Det har været en stor forbedring at flytte javascripts ud i et eksternt javascript, men jeg ved endnu ikke, om de forskellige scripts (endsige html-markup) er lavet så smart som mulig :o)

Men mange tak for hjælpen i hvert fald. Grunken smid lige et svar, så vil jeg belønne jer så fyrsteligt, som eksperten nu tillader :D

Et svar er på kastet :o)

-- og tak for points ;~}