2011-12-22 206 views
5

我有一個litle問題,我不知道如何解決它。jQuery更新html元素文本而不影響HTML子元素

我喜歡這裏的一個

<ul id="mylist"> 
    <li id="el_01"> 
     <div class="title"> 
      Title Goes Here 
      <span class="openClose"></span> 
     </div> 
    </li> 
</ul> 

我喜歡做的是修改「名稱在這兒」的HTML層次。

我有嘗試是:

$('#el_01 title').text('New Title Goes Here'); 

但也刪除:

<span class="openClose"></span> 

有沒有一種方法來更新只有「名稱在這兒」,而不影響span元素?

回答

8

您可以通過訪問DOM元素並獲取其firstChild來直接編輯文本節點。

$('#el_01 .title')[0].firstChild.data = 'New Title Goes Here'; 

如果有幾個.title元素,你可以在.each()循環做到這一點。

$('#el_01 .title').each(function(i,el) { 
    el.firstChild.data = 'New Title Goes Here'; 
}); 
+1

非常好!謝謝 !幾分鐘後我會檢查它的答案。 – 2011-12-22 15:29:27

2

兩個可能的解決方案:

或者:換行文本在其自己的一個跨度:

<div class="title"> 
    <span class="text">Title Goes Here</span> 
    <span class="openClose"></span> 
</div> 

...和更新:

$('#el_01 .text').text('New Title Goes Here'); 

或者:保留副本o f openClose範圍並在更新文本後重新插入:

var openClose = $('#el_01 .title .openClose'); 
$('#el_01 .title').text('New Title Goes Here').append(openClose);