How to get inner HTML of element inside a list item, within a delegate?

Question

I have this bit of HTML :

<li eventId="123">
    <img src="image.jpeg"/>
    <h3 id="eventName">Event Name</h3>
    <p id="eventDescription"></p>
</li>

I want to be able to pull out the <h3> and <p> via jQuery so that I can update their values.

I have a delegate bound to the list items, and on click I'm trying to grab hold of <h3> and <p> using :

function eventIdClicked()
{
    // This gets hold of "123" OK
        theEvent.id = $(this).get(0).getAttribute('eventId');

        // How to get the other 2 inner html?
    var existingEventName = $(this).get(1).getAttribute('eventName');
        var existingEventDesc = $(this).get(2).getAttribute('eventDescription');
    $.mobile.changePage("home.html");
}

Am I able to do this?

Answer 1

Maybe something like $(this).find("h3").text() and $(this).find("p").text() ?

Very simple jquery.

Also, while it isn't affecting the code in this case, ID's must be unique.

If the ID's aren't unique the elements might as well not have id's.

Answer 2

Use children function:

var existingEventName = $(this).children('h3')
var existingEventDesc = $(this).children('p');

Now you can use text to grab or modify values. On the other hand those elements also have ids so you can access them using id selector.

Answer 3

function eventIdClicked()
{
    // This gets hold of "123" OK
    theEvent.id = $(this).get(0).getAttribute('eventId');

    // since you used an id for both tags, you could even ommit the context 
    var existingEventName =  $("#eventName", this);
    var existingEventDesc =  $("#eventDescription", this);
    existingEventName.text("a new event name");
    existingEventDesc.text("a new description");

    $.mobile.changePage("home.html");
}

Answer 4

First, I take for granted that there are several of these <li> so you shouldn't use the id attribute as id have to be unique. I replaced these with a class name.

<li eventId="123">
    <img src="image.jpeg"/>
    <h3 class="name">Event Name</h3>
    <p class="description"></p>
</li>

I cleaned up your syntax using cleaner jQuery methods. I also add the values to the object your are already referencing.

function eventIdClicked()
{
    theEvent.id = $(this).attr('eventId');
    theEvent.name = $('.name', this).text();
    theEvent.description= $('.description', this).text();

    $.mobile.changePage("home.html");
}

If you are using HTML5 this would be cleaner:

Replace <li eventId="123">

• with <li data-event="{'id':123,'name':Event Name','description':'Event Description'}">

Replace

theEvent.id = $(this).attr('eventId');
theEvent.name = $('.name', this).text();
theEvent.description= $('.description', this).text();

• with theEvent = $(this).data('event');

Answer 5

First off, in your case you should use classes instead of Id's if there are going to be multiple eventnames and eventdescriptions. As for the event handling try passing the event object into the function like so:

function eventIdClicked(evt){
   // Now you get get the event target.
   // In your case this is the li element.
   var target = $(evt.target);

   // Now you can pull out the children that you want.
   var eventName = target.children(".eventName").text();
   var eventDescription = target.children(".eventDescription").text();

   // Do more stuff...

}

Answer 6

If you want to change the innerHTML of the <h3> and <p> , you could use

$('#eventName').html(/*NEW HTML HERE*/);
$('#eventDescription').html(/*NEW HTML HERE*/);

This is assuming the ids are unique in your document