JQuery的.Parent（）

確定這裏是我的HTML（約20一行）JQuery的.Parent（）

<tr class="post-unauth message-unread"> 
    <td> 
    <input class="check-read" type="checkbox" checked="checked" value="68"/> 
    </td> 
    <td class="message-description" title="Post Title"> 
    </td> 
    <td class="message-author">Name</td> 
    <td class="message-dates">3 hours ago</td> 
    <td class="message-commentcount" title="0 comment(s)"> 
    </td> 
</tr>

現在，當該複選框被點擊，我需要更改父

$('.check-read').click(function() { 
     $(this).parent().parent().removeClass('message-unread').addClass('message-read'); 
});

我的班'我錯誤地忽略了一些顯而易見的事情，因爲這不起作用（不錯），但沒有任何變化。

我甚至嘗試過設置CSS背景顏色並且不改變HTML。

有什麼建議嗎？

來源

2010-01-21 LiamB

你有消息閱讀的tr，你正在刪除消息未讀 – Martin 2010-01-21 15:06:25

這只是一個錯字。 – LiamB 2010-01-21 15:08:09

Firebug是否顯示要添加到元素中的類？這會讓你知道它是一個CSS問題還是一個jQuery問題。如果您的選擇器沒有任何元素，那麼當您對空集執行操作時不會出錯。它什麼都不會做。在你的例子中，parent.parent沒有'message-unread'類，但我不認爲這應該是一個問題。 – Mark 2010-01-21 15:10:39

我認爲你應該儘量靠近。這在jQuery的1.3是新

$(this).closest("tr").removeClass('message-unread').addClass('message-read');

closest docs

正如馬克提到在下面的評論，使用類會更適合這裏，因爲它是不太可能在你的表結構變化的影響。

$(this).closest(".message_row").removeClass('message-unread').addClass('message-read');

然後將「message_row」添加到您的tr。如果未選中的框保證有消息未讀類，那麼可以將它用於選擇器，而不是添加message_row類並選擇它。

來源

2010-01-21 15:05:17 sberry

當你的答案進來時，我正在打字。最接近在這種情況下非常方便。我會嘗試使用類而不是標籤，因爲市場變化對jQuery來說不那麼脆弱。 – Mark 2010-01-21 15:08:55

同意班級建議......我也會加上。 – sberry 2010-01-21 15:10:47

我喜歡這個想法，這在這裏的工作很不錯，但是如果將來他們在複選框之前添加新的，它仍然可以工作嗎？我的意思是仍然是最接近的回報，tr或接下來的tr？我的想法/建議將與tr和複選框相關聯，並帶有一些id前綴，並根據這些發現元素，這將成爲未來DOM更改的傻瓜prrof。 – 2010-01-21 15:41:51

只是提供一個替代解決方案。在這種情況下，我更願意將點擊附加到TR，然後讓所有子元素的點擊事件向上鼓泡。你可以做這樣的事情：

$(".classForEachPost").click(function(e){ 
    var $target = $(e.target); 
    var $this = $(this); 

    if($target.is(".check-read:checkbox")){ 
     $this.removeClass("message-unread").addClass("message-read"); 
    } 

    // check for other click events in the TR you might want to act upon 
});

當有大量的一排，DIV等動作我喜歡這種模式它停止了很多穿越了圖形和向下，集中了所有的事件句柄在一個地方。它使我更容易將它包裝在一個jQuery插件中。

$.fn.myPostRow = function(){ 
    this.click(function(e){ 
     // same code as above 
    } 
};

然後，你必須將整行一個插件，你可以只調用諸如：

$(".tableOfPosts TR").myPostRow();

這將與HTML標記和插件混合在只有JavaScript可以移動到一個JS文件。

答案完全從您最初的問題中解開，但希望它仍然有用。

來源

2010-01-21 15:23:23 Mark

JQuery的.Parent（）

回答

相關問題