Javascript Guru Need - How to Select all instances of same CSS class?

[soma56]

Here's an example of what I've been banging my head against the wall with for the last couple of days. If you throw it in a browser it will make sense. 

[code=php:0]
<script type="text/javascript">
function fnSelect(objId)
{
   fnDeSelect();
   if (document.selection) 
   {
      var range = document.body.createTextRange();
      range.moveToElementText(document.getElementById(objId));
      range.select();
   }
   else if (window.getSelection) 
   {
      var range = document.createRange();
      range.selectNode(document.getElementById(objId));
      window.getSelection().addRange(range);
   }
}
function fnDeSelect() 
{
   if (document.selection)
             document.selection.empty();
   else if (window.getSelection)
              window.getSelection().removeAllRanges();
} 
</script>


<h1>How Do I Only Highlight the Numbers?</h1>
<form>
<input type="button" value="Select/Highlight" onClick="fnSelect('mydiv')">


<?PHP
   

$i = 0; 

while ($i <= 100){
ob_flush();
flush();
$i++;
echo "<div class=\"my class\" id=\"mydiv\">$i</div>";
echo "<br />";
echo "<div id=\"anotherdiv\">I Like Numbers</div>";
echo "<br />";

// wait for 1 second
usleep(1000000);

}

?>
</form>

 

 

My php script echoes out the div's I need highlighted along with other information in chunks. I need to be able to click the button and highlight the same css class that is on the page.

[RichardRotterdam]

Could you post the HTML output that is shown in the browser ? It's most likely that people don't want to run the php on a server just to see the output.

[soma56]

Sure:

 

<h1>How Do I Highlight All The Numbers?</h1>
<form>
<input type="button" value="Select/Highlight" onClick="fnSelect('mydiv')">


<div class="my class" id="mydiv">1</div><br /><div id="anotherdiv">I Like Numbers</div><br /><div class="my class" id="mydiv">2</div><br /><div id="anotherdiv">I Like Numbers</div><br /><div class="my class" id="mydiv">3</div><br /><div id="anotherdiv">I Like Numbers</div><br /><div class="my class" id="mydiv">4</div><br /><div id="anotherdiv">I Like Numbers</div><br /><div class="my class" id="mydiv">5</div><br /><div id="anotherdiv">I Like Numbers</div><br /><div class="my class" id="mydiv">6</div><br /><div id="anotherdiv">I Like Numbers</div><br /><div class="my class" id="mydiv">7</div><br /><div id="anotherdiv">I Like Numbers</div><br /><div class="my class" id="mydiv">8</div><br /><div id="anotherdiv">I Like Numbers</div><br /><div class="my class" id="mydiv">9</div><br /><div id="anotherdiv">I Like Numbers</div><br /><div class="my class" id="mydiv">10</div><br /><div id="anotherdiv">I Like Numbers</div><br /><div class="my class" id="mydiv">11</div><br /><div id="anotherdiv">I Like Numbers</div><br /><div class="my class" id="mydiv">12</div><br /><div id="anotherdiv">I Like Numbers</div><br /><div class="my class" id="mydiv">13</div><br /><div id="anotherdiv">I Like Numbers</div><br /><div class="my class" id="mydiv">14</div><br /><div id="anotherdiv">I Like Numbers</div><br /><div class="my class" id="mydiv">15</div><br /><div id="anotherdiv">I Like Numbers</div><br /><div class="my class" id="mydiv">16</div><br /><div id="anotherdiv">I Like Numbers</div><br /><div class="my class" id="mydiv">17</div><br /><div id="anotherdiv">I Like Numbers</div><br /><div class="my class" id="mydiv">18</div><br /><div id="anotherdiv">I Like Numbers</div><br /><div class="my class" id="mydiv">19</div><br /><div id="anotherdiv">I Like Numbers</div><br /><div class="my class" id="mydiv">20</div><br /><div id="anotherdiv">I Like Numbers</div><br /><div class="my class" id="mydiv">21</div><br /><div id="anotherdiv">I Like Numbers</div>
</form>

 

The php script runs through a simple loop echoing out numbers. While the button can highlight the first number I'm trying to figure out how to highlight all instances of the same div. I think it can only be done through a class or name associated with the div.

 

While I did figure out how to actually highlight the div:

 

<script type="text/javascript">
function highlight (item) {
var items = document.getElementsByName (item);
var j=items.length;
for (var i=0; i<j; i++) {
	items[i].className = "highlight";
}
}
</script>
<style type="text/css">
.highlight {
background: #FF0000;
color: #0000FF;
}
</style>
<h1>This is one way to highlight the target DIVs</h1>
<form>
<input type="button" value="Select/Highlight" onClick="highlight('thisone')"><br><br>

<?php
$i = 0; 

while ($i < 20){
$i++;
echo '<div name="thisone">Highlight this DIV - '.$i.'</div>';
echo '<br />';
echo '<div>I Like Numbers</div>';
echo '<br />';
}
?>
</form>

I couldn't figure out how to highlight them as a means of 'selecting' the text for copying. I.E. hit CTRL-C right after highlighting to copy. 

[Adam]

http://javascript.about.com/library/bldom08.htm

 

Take note of the comments about getElementsByClassName() not being a standard. Certain browsers do offer it by default, but you can't rely on it to be cross browser that way.