Question

So basically I have “Jack Shephard” under ‘div.actor-name a’ & I want that same value to be the title attribute for ‘div.actor-image a’. Same thing for “John Lock” as well, so multiple cases.

JQuery:

<script type="text/javascript">
$().ready(function() {
var actortitle = $("div.actor-image a").closest.('div.actor-name a').html();

$("div.actor-image a").each(function() {
$(this).attr('title', actortitle );
});
});
</script>

HTML:

<div id="actor1" class="lost">

<div class="actor-name">
<a href="http://www.lost.com">
Jack Shephard
</a>
</div>

<div class="actor-roles">
ROLES GO HERE
</div>

<div class="actor-image">
<a title="Jack Shephard" id="actor1-image" src="jack.jpg" href="http://www.lost.com"></a>
</div>

</div>



<div id="actor2" class="lost">

<div class="actor-name">
<a href="http://www.lost.com">
John Lock
</a>
</div>

<div class="actor-roles">
ROLES GO HERE
</div>

<div class="actor-image">
<a title="John Lock" id="actor2-image" src="john.jpg" href="http://www.lost.com"></a>
</div>

</div>

The current jQuery isn’t working as expected and is driving me crazy!

Answer 1

$("div.actor-image a").attr('title', function(i,val) {
    var text = $(this).parent().prevAll('.actor-name').text();
    return $.trim( text );
});

This uses the attr()^[docs] method, but passes it a function. The return value of the function will be the new value.

In the function, it uses the parent()^[docs] method to traverse to the parent of the <a>, then the prevAll()^[docs] method to get the .actor-name element, then the text()^[docs] method to grab its text content.

Before it returns the text, it uses the jQuery.trim()^[docs] method to trim any leading or trailing whitespace from the text.