Javascript question

  • Thread starter Thread starter Tem
  • Start date Start date
T

Tem

I need to write a script that will reverse the ordering of the <span> tags
programatically.


<div class="paragraph">
<span class="line">line 1</span>
<span class="line">line 2</span>
<span class="line">line 3</span>
</div>



when the function runs the html display should be

<div class="paragraph">
<span class="line">line 3</span>
<span class="line">line 2</span>
<span class="line">line 1</span>
</div>



Can this be done with javascript? Sorry I'm new to programming.
 
If you want to do this using JavaScript I would suggest using an array, and
iterating through it. This way you can simply increment or decrement the
index. However, unless it is critical that this be done client-side, I would
suggest that you do it server-side so that you can avoid unnecessary messy
JavaScript (I am a fan of JavaScript, but if it does not improve the
appearance, performance, or usability of a page, I prefer server-side). If
it is critical and you need help creating the script, let me know. Good
Luck!
 
I thought of that too but I want to save users from redownloading the page.

Here's my thinking

Get all objectsin paragraph
Save objectsin to an array
Reverse the array
Push the objectsin back to paragraph

if you can help me translate this into javascript that would be great
thanks
 
Try this:


<div id="divParagraph" class="paragraph">
<span class="line">line 1</span>
<span class="line">line 2</span>
<span class="line">line 3</span>
</div>


var lines[];
var index=0;
var original=document.getElementById('divParagraph').innerHtml;
var index1=original.indexOf('<span');
var index2=original.indexOf('<span',index1+1);

while(index2!=-1)
{
lines[index]=original.slice(index1,index2-1);
index1=original.indexOf('<span',index1+1);
index2=original.indexOf('<span',index2+1);
index++;
}
lines[index]=original.slice(original.lastIndexOf('<span'),original.length-1);

document.getElementById('divParagraph').innerHtml='';
for(line in lines)
{
document.getElementById('divParagraph').innerHtml=line+document.getElementById('divParagraph').innerHtml;}You will notice that in the HTML I added an id attribute to the <div>. Thisis important, otherwise JavaScript will not be able to find the element. Thefirst section of the code adds the lines into the array by using the indexesof the opening <span> tags. It then clears the innerHtml and iteratesthrough the array, inserting each line at the beginning of the innerHtml. Ihave not tested the code, but I expect it should work reasonably well. GoodLuck!--Nathan (e-mail address removed)://www.nathansokalski.com/"Tem" <[email protected]> wrote in messagenews:%[email protected]...>I thought of that too but I want to save users from redownloading the page.>> Here's my thinking>> Get all objectsin paragraph> Save objectsin to an array> Reverse the array> Push the objectsin back to paragraph>> if you can help me translate this into javascript that would be great> thanks>> "Nathan Sokalski" <[email protected]> wrote in messagenews:%236s%[email protected]...>> If you want to do this using JavaScript I would suggest using an array,and iterating through it. This way you can simply increment or decrement theindex. However, unless it is critical that this be done client-side, I wouldsuggest that you do it server-side so that you can avoid unnecessary messyJavaScript (I am a fan of JavaScript, but if it does not improve theappearance, performance, or usability of a page, I prefer server-side). Ifit is critical and you need help creating the script, let me know. GoodLuck!>> -->> Nathan Sokalski>> (e-mail address removed)>> http://www.nathansokalski.com/>>>> "Tem" <[email protected]> wrote in messageneed to write a script that will reverse the ordering of the <span>tags programatically.>>>>>>>>> <div class="paragraph">>>> <span class="line">line 1</span>>>> <span class="line">line 2</span>>>> <span class="line">line 3</span>>>> </div>>>>>>>>>>>>> when the function runs the html display should be>>>>>> <div class="paragraph">>>> <span class="line">line 3</span>>>> <span class="line">line 2</span>>>> <span class="line">line 1</span>>>> </div>>>>>>>>>>>>> Can this be done with javascript? Sorry I'm new to programming.>>>>>
 
I thought of that too but I want to save users from redownloading the page.

Here's my thinking

Get all objectsin paragraph
Save objectsin to an array
Reverse the array
Push the objectsin back to paragraph

if you can help me translate this into javascript that would be great
thanks
Click to expand...

Tem, you can also create an array from the beginning and use it to
populate a paragraph and then to sort an elements...
 
<script>
function cloneNodeList(list)
{
var a = new Array();
for (var i=0; i < list.length; ++i)
a = list;
return a;
}
function reverseDiv()
{
var div = document.getElementById('foo');
var spans = cloneNodeList(div.childNodes);
for (var i=0; i < spans.length; ++i)
div.removeChild(spans);
for (var i=spans.length-1; i >= 0; --i)
div.appendChild(spans);
}
</script>
<div class="paragraph" id="foo" onclick="reverseDiv();">
<span class="line">line 1</span>
<span class="line">line 2</span>
<span class="line">line 3</span>
</div>

-- bruce (sqlwork.com)
 
Thank you


bruce barker said:
<script>
function cloneNodeList(list)
{
var a = new Array();
for (var i=0; i < list.length; ++i)
a = list;
return a;
}
function reverseDiv()
{
var div = document.getElementById('foo');
var spans = cloneNodeList(div.childNodes);
for (var i=0; i < spans.length; ++i)
div.removeChild(spans);
for (var i=spans.length-1; i >= 0; --i)
div.appendChild(spans);
}
</script>
<div class="paragraph" id="foo" onclick="reverseDiv();">
<span class="line">line 1</span>
<span class="line">line 2</span>
<span class="line">line 3</span>
</div>

-- bruce (sqlwork.com)

I need to write a script that will reverse the ordering of the <span>
tags programatically.


<div class="paragraph">
<span class="line">line 1</span>
<span class="line">line 2</span>
<span class="line">line 3</span>
</div>



when the function runs the html display should be

<div class="paragraph">
<span class="line">line 3</span>
<span class="line">line 2</span>
<span class="line">line 1</span>
</div>



Can this be done with javascript? Sorry I'm new to programming.
Click to expand...
Click to expand...
 
Back
Top