[js+dom] Alle id's binnen element doorlopen en aanpassen

[wboard]

stel ik heb het volgende html block:

XHTML:

<div id="specifications">
    <span id="spandescription">
        blaat<br />
        <a href="#" id="link" onclick="doiets()">doe iets</a>
    </span>
    <span id="spaninfo">
        Eenheid: <input type="input" id="eenheid" name="specification[]" value="" /><br />
        Varianten: <input id="specificationline" type="input" name="specificationline[]" value="" />
    </span>
</div>

wat is dan de beste manier om alle id's binnen het element "specifications" door te lopen?
Ik heb nu het volgende:

JavaScript:

deel uit functie:

var eId     = $(e); //e is dan het element waar binnen gelooped wordt.
var copyE   = eId.cloneNode(true); //dit is om een element te clonen
var cLength = copyE.childNodes.length -1;

for(var i = 0; cLength >= i;  i++) 
{
    alert(copyE.nodeName);
    if(copyE.childNodes[i].id) 
    {
        var cNode   = copyE.childNodes[i];
        var firstId = cNode.id;
        cNode.id = firstId+'_';  //hier pas ik het id aan (maar daar wil ik dus dat alle id's langskomen i.p.v. alleen van de div en span elementen.
    }
}

het probleem hierbij is dat hij niet door <a> loopt en ook niet door <input>, ik heb me lam gezocht
en weet dit alleen maar op te lossen door nog een loop te maken en dan evt. te selecteren op tagname o.i.d..

heeft iemand een goed idee?

[XWB]

Hoewel je met cloneNode ( true ) de hele tree kloont, returned childNodes enkel het eerste niveau. In dit geval heb je daar vier nodes: twee spans en twee text nodes. Je kan dieper checken met b.v. hasChildNodes () op copyE.childNodes[i] te doen.

[BCC]

In een functie gooien met recursie?

[Bosmonster]

Of het jezelf een stuk makkelijker maken en een library pakken die dit allemaal xbrowser en zo efficient mogelijk voor je afhandelt

jQuery:

JavaScript:

$('#specifications>span');

Klaar is Kees.

[XWB]

Dat kan ook En zo te zien gebruikt TS een library.

JavaScript:

$(e);

[wboard]

Bosmonster schreef op donderdag 16 juli 2009 @ 22:30:
Of het jezelf een stuk makkelijker maken en een library pakken die dit allemaal xbrowser en zo efficient mogelijk voor je afhandelt

jQuery:

JavaScript:

$('#specifications>span');

Klaar is Kees.

precies en ik gebruik dus ook prototype in mijn project, echter bevat dat frame work geen methode om een element met alle mogelijke (html) inhoud te clonen op basis van een id EN daarnaast van de gecloonde versie alle element id's te wijzigen (die zich bevinden in de parent element). Vandaar deze manier, maar recursie moet dan inderdaad wel werken, zal eens kijken..

[Bosmonster]

wboard schreef op donderdag 16 juli 2009 @ 22:51:
[...]


precies en ik gebruik dus ook prototype in mijn project, echter bevat dat frame work geen methode om een element met alle mogelijke (html) inhoud te clonen op basis van een id EN daarnaast van de gecloonde versie alle element id's te wijzigen (die zich bevinden in de parent element). Vandaar deze manier, maar recursie moet dan inderdaad wel werken, zal eens kijken..

Mjah... Ondanks dat prototype redelijk zuigt, kan ik me niet voorstellen dat het dat niet zou kunnen..

Met jQuery is wat je zegt iig in 2 regels te doen.

[ Voor 4% gewijzigd door Bosmonster op 16-07-2009 23:39 ]

[Joolee]

Een eenvoudige manier is in JQuery:

JavaScript:

$.each(function(){
    this.id = 'HHH_'+this.id;
}, $(element).find('[id]'));

Anders zul je het met een recursieve functie moeten doen.

[wboard]

mmm.. misschien toch maar overstappen naar jquery..

[Bosmonster]

Joolee schreef op donderdag 16 juli 2009 @ 23:56:
Een eenvoudige manier is in JQuery:

JavaScript:

$.each(function(){
    this.id = 'HHH_'+this.id;
}, $(element).find('[id]'));

Anders zul je het met een recursieve functie moeten doen.

Dit is alleen geen eenvoudige manier, maar ene omslachtige. Waarom gebruik je niet gewoon de selector-each Hiermee loop je door ALLE items in je pagina heen, inclusief bijvoorbeeld het specifications element (en waarschijnlijk tientallen andere ongerelateerde elementen).

Wat ik eerder al typte:

JavaScript:

$('#specifications>span');

Of volledige, als je perse wilt checken of er een ID aanwezig is:

JavaScript:

$('#specifications>span[id]').each(function(){
   // blaat
});

[Joolee]

Bosmonster schreef op vrijdag 17 juli 2009 @ 10:03:
[...]


Dit is alleen geen eenvoudige manier, maar ene omslachtige. Waarom gebruik je niet gewoon de selector-each Hiermee loop je door ALLE items in je pagina heen, inclusief bijvoorbeeld het specifications element (en waarschijnlijk tientallen andere ongerelateerde elementen).

Wat ik eerder al typte:

JavaScript:

$('#specifications>span');

Of volledige, als je perse wilt checken of er een ID aanwezig is:

JavaScript:

$('#specifications>span[id]').each(function(){
   // blaat
});

Als je goed naar de code kijkt doe ik het niet zo anders dan jij, alleen heb ik de selector achter de functie staan i.p.v. ervoor.

[wboard]

heb het als volgt opgelost, als iemand weet hoe het korter d.m.v. prototype kan hoor ik het graag (kan helaas niet afstappen van prototype i.v.m. allerhande implementaties

JavaScript:

                    var eId     = $(e);
                    var copyE   = eId.cloneNode(true);
                    
                    updateChildId(copyE);

                    function updateChildId(element)
                    {
                        var cLength = element.childNodes.length -1;

                        for(var i = 0; cLength >= i;  i++)
                        {
                            if(element.childNodes[i].id)
                            {
                                var cNode   = element.childNodes[i];
                                var firstId = cNode.id;
                                cNode.id = firstId+'_';

                                if(element.childNodes[i].hasChildNodes())
                                {
                                    updateChildId(cNode);
                                }
                            }
                        }
                    }

[Bosmonster]

Joolee schreef op vrijdag 17 juli 2009 @ 10:12:
[...]

Als je goed naar de code kijkt doe ik het niet zo anders dan jij, alleen heb ik de selector achter de functie staan i.p.v. ervoor.

Je doet ook niet zoveel anders, je doet het alleen een stuk omslachtiger met de object/array iterator ipv gewoon middels de gebruikelijke selector. Het druist imho een beetje in tegen het jQuery principe en volgens mij help je ook chaining ermee omzeep.

Daarnaast is de volgorde van de argumenten omgedraaid. Eerst het object, dan de callback.

Dus inderdaad, het verschil is niet zo groot, het is alleen in jQuery erg ongebruikelijk om het op een dergelijke manier te doen.

[wboard]

op een of andere manier kom ik er niet goed uit.....

XHTML:

<input type="hidden" id="PP_specifications" name="PP_specifications" value="1" />
<input type="hidden" id="PP_specificationlines" name="PP_specificationlines" value="1" />
<div class="row_order_form" id="specifications[1]">
    <span class="description">
        Artikel variant [1]<span class="fakeLink" onmouseover="fakeLinkBehavior(this);" onclick="mcElement.element('specifications[1]', 'specifications[1]', 'copy', 'after', 'PP_specifications');"><img src="/images/1/icons/add.gif" /></span> :
    </span>
    <span class="info">
        Eenheid: <input type="input" id="eenheid" name="specifications[1]" value="" /><br />
        Varianten: <span class="fakeLink" onmouseover="fakeLinkBehavior(this);" onclick="mcElement.element('specificationline[1]', 'specificationline[1]', 'copy', 'after', 'PP_specificationlines');"><img src="/images/1/icons/add.gif" /></span><br />
        <input id="specificationline[1]" type="input" name="specificationline[1][]" value="" />
    </span>
</div>

dit moet het kunnen (maar dan universeel te gebruiken, ik wil niet voor iedere andere situatie weer wat anders gaan schrijven)
- het hele blok: specifications[1] dupliceren en vervolgens moeten er wat waarden opgehoogd worden (waaronder id's en parameters van de functie mcElement)
- een gedeelte van wat in het blok zit <input id="specificationline[1]" type="input" name="specificationline[1][]" value="" /> ook kunnen dupliceren

JavaScript:

var mcElement = 
{

    copy    :   function(e, target, position, pp)   
                { 
                    var eId     = $(e);
                    var copyE   = eId.cloneNode(true);

                    /*
                    str = copyE.innerHTML;
                    copyE.innerHTML = str.replace(/[1]/, $(pp).value);
                    */

                    $(pp).value = $(pp).value + 1;

                    updateChildId(copyE);

                    function updateChildId(element)
                    {
                        var cLength = element.childNodes.length -1;

                        for(var i = 0; cLength >= i;  i++)
                        {
                            if(element.childNodes[i].id)
                            {
                                var cNode   = element.childNodes[i];
                                var firstId = cNode.id;
                                cNode.id = firstId+'_'+$('PP_'+e).value;
                                
                                if(cNode.name)
                                {
                                    cNode.name = cNode.name + '_' + $('PP_'+e).value;
                                }
                                if(element.childNodes[i].hasChildNodes())
                                {
                                    updateChildId(cNode);
                                }
                            }
                        }
                    }


                    if(position == 'before') { $(target).insert({before:copyE}); }
                    else { $(target).insert({after:copyE}); }
                },
    element :   function(e, target, type, position, pp) 
                {
                    var eId = $(e);
                    if(type == 'move') { $(target).appendChild(eId); }
                    else if(type == 'copy')     
                    { 
                        this.copy(e, target, position, pp);
                    }
                }
}

dit moet veel korter kunnen, maar ik ben heb de verkeerde afslag genomen dus kom er even niet uit

[wboard]

is het misschien niet eens slim dit blok in z'n geheel te willen clonen (met daarin weer een block die gekloond kan worden)

XHTML:

<input type="hidden" id="PP_specifications" name="PP_specifications" value="1" /> 
<input type="hidden" id="PP_specificationlines" name="PP_specificationlines" value="1" /> 
<div class="row_order_form" id="specifications[1]"> 
    <span class="description"> 
        Artikel variant [1]<span class="fakeLink" onmouseover="fakeLinkBehavior(this);" onclick="mcElement.element('specifications[1]', 'specifications[1]', 'copy', 'after', 'PP_specifications');"><img src="/images/1/icons/add.gif" /></span> : 
    </span> 
    <span class="info"> 
        Eenheid: <input type="input" id="eenheid" name="specifications[1]" value="" /><br /> 
        Varianten: <span class="fakeLink" onmouseover="fakeLinkBehavior(this);" onclick="mcElement.element('specificationline[1]', 'specificationline[1]', 'copy', 'after', 'PP_specificationlines');"><img src="/images/1/icons/add.gif" /></span><br /> 
        <input id="specificationline[1]" type="input" name="specificationline[1][]" value="" /> 
    </span> 
</div>

zou het ophalen van het blok vanaf de server d.m.v. een ajax call beter zijn?

[pingwings]

Prototype kan dit ook.

JavaScript:

var newNode = $('ParentNodeId').cloneNode(true);
$('parentVanParentNodeId').insert(newNode);
var childNodes = newNode.childElements();
for(var i=0; i<childNodes.length; i++){
  //doe iets met je childnodes.
} 

[ Voor 9% gewijzigd door pingwings op 19-07-2009 09:39 . Reden: insert vergeten. ]

[wboard]

pingwings schreef op zondag 19 juli 2009 @ 09:38:
Prototype kan dit ook.

JavaScript:

var newNode = $('ParentNodeId').cloneNode(true);
$('parentVanParentNodeId').insert(newNode);
var childNodes = newNode.childElements();
for(var i=0; i<childNodes.length; i++){
  //doe iets met je childnodes.
} 

maar dan moet je alsnog recursie toepassen om alle elementen te doorlopen binnen de nieuwe node

het komt er overigens op neer dat ik toch een ajax request moet doen, ik moet teveel parameters steeds wijzigen (bij het clonen) om dat in 1 nette functie te trappen

[ Voor 15% gewijzigd door wboard op 20-07-2009 11:38 ]

[wackmaniac]

Bosmonster schreef op donderdag 16 juli 2009 @ 22:30:
Of het jezelf een stuk makkelijker maken en een library pakken die dit allemaal xbrowser en zo efficient mogelijk voor je afhandelt

jQuery:

JavaScript:

$('#specifications>span');

Klaar is Kees.

Volgens mij haal je nu alleen de span-elementen op. TS wil, als ik het goed lees, ALLE elementen met een ID. En als ik het even snel bekijk zijn de selectors van Prototype vrijwel gelijk aan die van jQuery.

[ Voor 10% gewijzigd door wackmaniac op 20-07-2009 11:59 ]

[Bosmonster]

wackmaniac schreef op maandag 20 juli 2009 @ 11:58:
[...]

Volgens mij haal je nu alleen de span-elementen op. TS wil, als ik het goed lees, ALLE elementen met een ID. En als ik het even snel bekijk zijn de selectors van Prototype vrijwel gelijk aan die van jQuery.

Ik ging er even vanuit dat ie alle spans die direct onder specifications staan op wilde halen, aangezien die de losse specifications aanduiden. (En dan merk ik maar even niet op dat dat qua semantiek natuurlijk niet helemaal correct is)

Maar goed, mocht je alle elementen met een ID willen hebben:

JavaScript:

$('#specifications>*[id]');

[wackmaniac]

Bosmonster schreef op maandag 20 juli 2009 @ 12:01:
[...]


Ik ging er even vanuit dat ie alle spans die direct onder specifications staan op wilde halen, aangezien die de losse specifications aanduiden. (En dan merk ik maar even niet op dat dat qua semantiek natuurlijk niet helemaal correct is)

Maar goed, mocht je alle elementen met een ID willen hebben:

JavaScript:

$('#specifications>*[id]');

Dit gaat volgens mij nog steeds maar 1 niveau diep (zowel met Prototype en Jquery even snel geprobeerd). Ik vrees dat je toch vast gaat zitten aan recursie.

[Bosmonster]

wackmaniac schreef op maandag 20 juli 2009 @ 13:43:
[...]


Dit gaat volgens mij nog steeds maar 1 niveau diep (zowel met Prototype en Jquery even snel geprobeerd). Ik vrees dat je toch vast gaat zitten aan recursie.

Vervang de > door een spatie

Zijn gewoon standaard CSS-selectors.

[ Voor 5% gewijzigd door Bosmonster op 20-07-2009 13:46 ]

[wackmaniac]

You are right, problem solved:

JavaScript:

$$('#specifications *[id]').each( function( element ) {
    // doe je ding met element
});

[wboard]

nice! dat kan ik goed gebruiken en is toch een stukje korter, desalniettemin moet ik nog meer parameters wijzigen als ID, dus ik haal het blokje nu gewoon van de server af met de juiste parameters...

thanks