如何在代理內的列表項中獲取元素的內部HTML？

我有這樣的一些HTML：如何在代理內的列表項中獲取元素的內部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"); 
}

難道我能做到這一點？

來源

2012-08-02 Jimmy

請記住接受[answer]（http://stackoverflow.com/a/11780851/144665）。 :) – iambriansreed 2012-08-02 15:33:43

對不起，但你知道'$（this）.get（X）.getAttribute（'foo'）'實際上在做什麼嗎？因爲你在第二和第三種情況下完全錯誤地使用它。您可能想閱讀'.get'：http://api.jquery.com/get/和'.getAttribute'：https：//developer.mozilla.org/en/DOM/element.getAttribute。 – 2012-08-02 15:41:32

@FelixKling你對[我的解決方案]（http://stackoverflow.com/a/11780851/144665）有什麼看法？ – iambriansreed 2012-08-02 15:48:50

首先，我理所當然的有幾個<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-02 15:27:08 iambriansreed

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

非常簡單的jquery。

另外，雖然它在這種情況下不影響代碼，但ID必須是唯一的。

如果ID不是唯一的，那麼元素可能沒有id。

來源

2012-08-02 15:19:43

使用children功能：

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

現在你可以使用text搶或修改值。另一方面，這些元素也有ID，所以你可以使用ID選擇器訪問它們。

來源

2012-08-02 15:19:56 Zbigniew

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-02 15:21:32

-1

如果你想改變<h3>和<p>的innerHTML，你可以使用

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

這是假設的ids在文檔中唯一

來源

2012-08-02 15:25:33

首先，你的情況，如果有將要多eventnames和eventdescriptions你應該使用類而不是編號的。至於事件處理嘗試將事件對象傳遞到函數中，如下所示：

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-02 15:27:50

如何在代理內的列表項中獲取元素的內部HTML？

回答

相關問題