Question

我有这个HTML：

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

我希望能够通过jQuery提取<h3>和<p>，以便我可以更新它们的值。

我有一个委托绑定到列表项，点击后我试图抓住<h3>和<p>使用：

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");
}

我能做到吗？

Answer 1

可能类似于$(this).find("h3").text()和$(this).find("p").text()？

非常简单的jquery。

此外，虽然在这种情况下它不会影响代码，但ID必须是唯一的。

如果ID不是唯一的，那么元素也可能没有id。

Answer 2

使用children功能：

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

现在您可以使用text来获取或修改值。另一方面，这些元素也有id，因此您可以使用id选择器访问它们。

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

首先，我理所当然地认为其中有几个<li>因此您不应该使用id属性，因为id必须是唯一的。我用类名替换了这些。

<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');

Answer 5

首先，在你的情况下，如果有多个事件名和事件描述，你应该使用类而不是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...

}

Answer 6

如果您想更改innerHTML和<h3>的{{1}}，可以使用

<p>

这假设$('#eventName').html(/*NEW HTML HERE*/); $('#eventDescription').html(/*NEW HTML HERE*/);在您的文档中是唯一的

如何在委托中的列表项中获取元素的内部HTML？

6 个答案: