1

我有这段 HTML：

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

我希望能够通过 jQuery 拉出<h3>and<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");
}

我能做到吗？

4

6 回答 6

2

也许像$(this).find("h3").text()和$(this).find("p").text()？

非常简单的jquery。

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

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

于 2012-08-02T15:19:43.203 回答
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 回答
1

使用children功能：

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

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

于 2012-08-02T15:19:56.563 回答
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

首先，我认为其中有几个是理所当然的，<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');
于 2012-08-02T15:27:08.380 回答
-1

如果你想改变innerHTMLand <h3>，<p>你可以使用

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

这是假设ids在您的文档中是唯一的

于 2012-08-02T15:25:33.280 回答