SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2011
    Location
    Hull, UK
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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

    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

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,313
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    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.

  3. #3
    SitePoint Enthusiast
    Join Date
    Jul 2011
    Location
    Hull, UK
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,313
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    Quote Originally Posted by JonnoW View Post
    That's awesome man, thanks for that exactly what I was shooting for.
    Cool

    Quote Originally Posted by JonnoW View Post
    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.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •