Display title attribute as string in another HTML element

Question

Been trying everything all day to get this to work with no luck.

I want to use the title attribute from an li element as a string inside of a completely separate span element.

Here is my code:

<script type="text/javascript">
    $(document).ready(function(){

    });
</script>
<div id="slider">
  <ul>
    <li class="slide" title="Careers">
        <img src="large-image-1.jpg" alt="Large Image 1" /> </li>
  </ul>
</div>
<div id="slide-thumbs">
  <ul>
    <li><img src="thumb-image-1.jpg" alt="Thumbnail for Large Image 1" />
        <span class="thumb-caption"><!-- need title attribute above reading "Careers" to go here --></span>
  </ul>
</div>

I feel like I'm missing something easy here. I can only use Javascript to do this with the script I'm working with. PHP is not an option. Any help would be very much appreciated.

Thank you, Justin.

Adam · Accepted Answer · 2013-01-23 00:56:13Z

3

var title = $('.slide').attr('title');
$('span').html(title);

answered Jan 23, 2013 at 0:56

Adam

6237 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

artsylar Over a year ago

or your site doesn't support jquery

Justin Whalley Over a year ago

Hey, it should be running jQuery. Here's the actual link: 72.10.171.242/~monteith Maybe you can see what's going on from there. I actually had to add the span tag in a .js file where the thumbnail code is located. So it's displaying from there. I appreciate the help guys, thanks a lot.

Adam Over a year ago

Just noticed: there's no closing </li> tag toward the bottom of your code. Don't know if that's causing a problem...

Justin Whalley Over a year ago

No, that was just simplified code to better explain the real situation.

DMTintner · Accepted Answer · 2013-02-05 10:10:26Z

1

The JS should work fine, but something to consider is you could do this with pure CSS and avoid the extra markup. Just display the title attribute using a pseudo-element and position it where you like:

.slide:before {
    content: attr(title);
    position: absolute;
    display: block;
}

Since the title is already displaying on the page and you're not generating anything else in addition to it, no reason for the extra element

answered Feb 5, 2013 at 10:10

DMTintner

14.8k5 gold badges39 silver badges33 bronze badges

Comments

niutech · Accepted Answer · 2013-01-23 01:13:27Z

0

If there is more than one slide, better use:

$('.thumb-caption').each(function(i) {
    $(this).html($('.slide').eq(i).attr('title'));
});

answered Jan 23, 2013 at 1:13

niutech

30.1k15 gold badges102 silver badges110 bronze badges

3 Comments

Justin Whalley Over a year ago

No luck with this either. Still an empty span tag. 72.10.171.242/~monteith

niutech Over a year ago

You're doing sth wrong - have a look at the quick demo: jsbin.com/ibuhoc/1

Justin Whalley Over a year ago

I applied your code exactly and the span tag is still empty. Here is the actual example of what I'm trying to do. 72.10.171.242/~monteith - The javascript is on line 198, the slides are on lines 271 and 296 (What's New and Careers). The thumbnails and the span tag I'm trying to populate come from a .js file called jquery.themepunch.revolution.min.js

Collectives™ on Stack Overflow

Display title attribute as string in another HTML element

3 Answers 3

4 Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related