1

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?

4

6 に答える 6

2

まず、複数のイベント名とイベントの説明がある場合は、ID の代わりにクラスを使用する必要があります。イベント処理に関しては、次のようにイベント オブジェクトを関数に渡してみてください。

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...

}
于 2012-08-02T15:27:50.753 に答える
2

多分何かのようなもの$(this).find("h3").text()です$(this).find("p").text()か？

非常にシンプルなjquery.

また、この場合コードには影響しませんが、ID は一意である必要があります。

ID が一意でない場合、要素に ID がない可能性があります。

于 2012-08-02T15:19:43.203 に答える
1

まず、当然のことながら、これらの属性はいくつかあるため、一意である必要があるため、属性を<li>使用しないでください。これらをクラス名に置き換えました。idid

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

よりクリーンな jQuery メソッドを使用して構文をクリーンアップしました。また、既に参照しているオブジェクトに値を追加します。

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

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

HTML5 を使用している場合、これはよりクリーンになります。

交換<li eventId="123">

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

交換

theEvent.id = $(this).attr('eventId');
theEvent.name = $('.name', this).text();
theEvent.description= $('.description', this).text();
  • とtheEvent = $(this).data('event');
于 2012-08-02T15:27:08.380 に答える
1 
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");
}
于 2012-08-02T15:21:32.900 に答える
1

使用children機能:

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

textを使用して、値を取得または変更できるようになりました。一方、これらの要素にも ID があるため、ID セレクターを使用してアクセスできます。

于 2012-08-02T15:19:56.563 に答える
-1

との を変更したい場合はinnerHTML、使用できます<h3><p>

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

idsこれは、ドキュメント内で一意であると仮定しています

于 2012-08-02T15:25:33.280 に答える