CODEWITHSUNDEEP
jqueryhtml
StealthRT
StealthRT

Reputation: 10542

jQuery changing html inside a div class thats inside a div

How would i go about changing just the HTML of this:

<div class="name">President Speech</div>

Thats inside this div:

<div class="videobox fl showsearchvideo" id="videoBox7">
  <div class="videothumb">
     <img src="http://brightcove04.o.brightcove.com/xxxxx/xxxx_xxxxx_xx-xxxxxx.jpg?pubId=xxxxxxx">
  </div>
  <div class="name">President Speech</div>
</div>

I've tried:

$('#videoBox7 .name').html('President Speech TEST!');

But that does not seem to work?

update

Seems that its not firing after the videos div runs the JS to populate the HTML thats its looking for.

<script type="text/javascript">
   $(document).ready(function() {
      $('#videoBox7 .name').html('President Speech TEST!');
   });
</script>

I have uploaded the JS that populates the videos to http://pastebin.com/DNBPNQUQ

Update 2

Found a way to achieve this by placing the $('#videoBox7 .name').html('President Speech TEST!'); inside the onPlaylistLoad function of the brightstar js.

Upvotes: 4

Views: 5798

Answers (4)

Sampson
Sampson

Reputation: 268334

Be sure to run this code only after the HTMLDivElement has been added to the DOM:

$(function(){
    $('#videoBox7 .name').html('President Speech TEST!');
});

Following a chat with the author, it became evident the problem was with the Brightcove Video Player loading new elements to reflect a playlist of videos. The clear solution as this point was to tie into the event-system of Brightcove's player to respond after their elements have been added.

Upvotes: 5

echo_Me
echo_Me

Reputation: 37233

you can simply give this

  <div class="name">President Speech</div>

an id , exemple

 <div id = "myid" class="name">President Speech</div>

and reach it by jquery like that

    $('#myid').html('President Speech TEST!');

or take a look here Getting the 2nd child element and see how to get the nth child , and for your case the second child.

Upvotes: 0

Tom
Tom

Reputation: 1057

You need to use .text()

The .text() function is actually pretty smart. You can pull the text out of an object and jQuery will know what you want. Your jQuery should be:

$("#videoBox7 .name").text("President Speech TEST!");

You also need to make sure you trigger the jQuery to run after the entire document has loaded is ready. You don't want to try to target this selector if the element isn't ready. Use this:

$(function () {
    $("#videoBox7 .name").text("President Speech TEST!");
});

Upvotes: -2

Dominic Green
Dominic Green

Reputation: 10260

What you have should work see http://jsfiddle.net/wRgDE/

Make sure you running it on document ready ie

$(document).ready(function(){
  $('#videoBox7 .name').html('President Speech TEST!');
});

Upvotes: 4

Related Questions