Find function skips duplicates


I have a div like this:

 <div id="hintdata"><div class='10003137'>Key Skills Level 3</div><div class='10003162'>Key Skills Level 3</div><div class='10003198'>Key Skills Level 3</div><div class='10030463'>Hairdressing</div><div class='10030475'>Hairdressing</div><div class='10038310'>Key Skills Level 3</div><div class='10038358'>Key Skills Level 3</div><div class='10038395'>Key Skills Level 3</div><div class='10058722'>Food level 2</div><div class='10064588'>Additional Maths</div><div class='10064588'>Additional Maths test100510</div><div class='50018048'>Welsh bacc Level 3</div><div class='50018073'>Art and Design</div><div class='50018097'>Art and Design</div><div class='50018103'>Art and Design</div><div class='50020481'>Food level 2</div><div class='50036725'>Travel and Tourism Year 12</div><div class='50036725'>Travel and Tourism Year 13</div><div class='50042555'>History of Art</div><div class='50067540'>Food Level 1</div></div></div>

Open in new window

and when I run this in firebug: $('#hintdata').find('div').each(function(index,element){

it does not return the div's with the same number.:

[div.10003137, div.10003162, div.10003198, div.10030463, div.10030475, div.10038310, div.10038358, div.10038395, div.10058722, div.50018048, div.50018073, div.50018097, div.50018103, div.50020481, div.50042555, div.50067540]

Open in new window

I would like to aggregate each div so that for example :

<div class='10064588'>Additional Maths</div> <div class='10064588'>Additional Maths test100510</div>

is edited to:
<div class='10064588'>Additional Maths<br />Additional Maths test100510</div> 

Open in new window

How would this be done?

LVL 13
Who is Participating?
leakim971Connect With a Mentor PluritechnicianCommented:
Check this :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script language="javascript" src=""></script>
<script language="javascript">
	$(document).ready(function() {
		var classes = [];
		$("div","#hintdata").each(function() {
			var c = $(this).attr("className");
			if(classes[c]) {
				$("div."+c).append("<br />"+ $(this).html());
			else {
				classes[c] = true;
                // checking
		//alert( $(".10064586").html() );
<div id="hintdata">
<div class='10064588'>Additional Maths1</div><div class='10064588'>Additional Maths1 test1</div>
<div class='10064587'>Additional Maths2</div><div class='10064587'>Additional Maths2 test2</div>
<div class='10064586'>Additional Maths3</div><div class='10064586'>Additional Maths3 test3</div>
<div class='10064585'>Additional Maths4</div><div class='10064585'>Additional Maths4 test4</div>
<div class='10064584'>Additional Maths5</div><div class='10064584'>Additional Maths5 test5</div>

Open in new window

darren-w-Author Commented:
That worked great, thanks Darren
You're welcome! Thanks for the points!
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.