Changing multiple div titles

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


         <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

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:

<!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.

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

Cool :slight_smile:

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.