Changing multiple div titles

**JonnoW** · Feb 13, 2013 10:28

Hi,

Wondering if anyone might be able to give me a hand with the following. I've got a couple of divs that I want to let editors change the Title attribute of. To do this I have created an editable area and a piece of jQuery that will grab the text from within this area and set the attr to it, which works fine.

I'm slightly stuck though on how to do this for multiple divs. Can I use 'this' somehow, or should I use a for loop?

Code explaination:
Take the h2 id=grabThis and append it to the title of the tab div

Code:

         <div class="tab" title="Original title">
		<div class="editorTitle">
			<h2>New title</h2>
			<p>Grab the text from the hidden H2 below and make this div's title equal to it.</p>
			<h2 id="grabThis">Profile</h2>
		</div>
	</div>

	<div class="tab">
		<div class="editorTitle">
			<h2>Another title</h2>
			<p>This is another fun paragraph of text</p>
			<h2 id="grabThis">Research</h2>
		</div>
	</div>

	<script>
	$(document).ready(function(){
		var titleToAdd = $('#grabThis').text();
		$('.tab').attr('title', titleToAdd);
	});
	</script>

Thanks guys

**Pullo** · Feb 13, 2013 13:01

Hi Jonno,

The problem is that you cannot have multiple ids with the same name on one page.
This will not work.

However, you can give each of the <h2> tags the same class.
You then select all of the <div> elements with the class "tab".
jQuery will return an array of the matched elements, which you can loop through.
Within the loop, $(this) will then refer to the individual <div> elements.

Something like this will work:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Change all the h tags</title>
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
  </head>
  
  <body>
    <div class="tab" title="Original title">
      <div class="editorTitle">
        <h2>New title</h2>
        <p>Grab the text from the hidden H2 below and make this div's title equal to it.</p>
        <h2 class="grabThis">Profile</h2>
      </div>
    </div>
    
    <div class="tab">
      <div class="editorTitle">
        <h2>Another title</h2>
        <p>This is another fun paragraph of text</p>
        <h2 class="grabThis">Research</h2>
      </div>
    </div>
    
    <script>
      $(document).ready(function(){
        $('.tab').each(function(){
          h = $(this).find(".grabThis").text();
          $(this).attr('title', h);
        });
      });
    </script>
  </body>
</html>

If you have any questions, or there's anything you would like explained in more detail, just let me know.

**JonnoW** · Feb 14, 2013 04:28

That's awesome man, thanks for that exactly what I was shooting for.

Is the array putting each letter in as an individual object? And if so, is this because it is not parsing the 'text' as a string?

Ha whoops, I always seem to do that when I'm posting on SitePoint!

Many thanks,

Jonno

**Pullo** · Feb 14, 2013 04:33

Originally Posted by JonnoW

That's awesome man, thanks for that exactly what I was shooting for.

Cool

Originally Posted by JonnoW

Is the array putting each letter in as an individual object? And if so, is this because it is not parsing the 'text' as a string?

Nah, the array contains a bunch of jQuery objects representing the <div> elements which have a class of "tab"
You loop over those objects, and assign the text of the <h2> tag with a class of ".grabThis" and which is a descendant of the current <div>, to the variable h.
Then you set the title of the current div to the value of h.
Both of these steps occur in one fell swoop.

User Tag List

Thread: Changing multiple div titles

Thread Tools

Display

Changing multiple div titles

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions