jquery與css最後一個孩子衝突

現在我有一個日誌列表的評論，我目前正在切換此列表以顯示更多評論或隱藏一些。jquery與css最後一個孩子衝突

在我把這個jQuery顯示/隱藏一些列表之前，我有一個類爲.review一些CSS的包裝是:last-child { border: none; }，這是工作，直到我把這個jQuery。

我的問題是爲什麼突然間這個CSS選擇器不工作在我的樣式表中，當我實現了這個jQuery？我也嘗試過，只是做jquery中的最後一個孩子，也沒有在那裏工作。

function reviewlistCutoff() { 
    var hiddenReviews = $('.reviewWrap:gt(6)').hide(); 

    if (hiddenReviews.size() > 0) { 
     var showCaption = '...' + hiddenReviews.size() + ' More Reviews'; 
     $('.reviewsList').append(
     $('<span class="toggler">' + showCaption + '</span>').toggle(

     function() { 
      hiddenReviews.show(); 
      $(this).text('...Fewer Reviews'); 

     }, function() { 
      hiddenReviews.hide(); 
      $(this).text(showCaption); 
     })); 

    } 
}

來源

2011-06-15 Lawrence

就我個人而言，我認爲答案更多地在於您的HTML和CSS;有可能jQuery已經添加了一些類名，這導致了其他具有更高特異性的CSS規則來影響這些元素......你可以在[JSFiddle]（http://jsfiddle.net/）上創建你的問題演示嗎？ – 2011-06-15 19:04:41

http://jsfiddle.net/TJctn/1/ – Lawrence 2011-06-15 19:10:28

現在出於一些奇怪的原因我的jquery沒有在那個小提琴工作，但它在我的網站上工作，但小提琴設置 – Lawrence 2011-06-15 19:13:01

.reviewWrap:last-child工作正常。

問題是，你隱藏了最後5個左右.reviewWraps - 最後一個是:last-child正在選擇什麼。

你真正想要的是從刪除border-bottom上次可見.reviewWraps。

幸運的是，還有更好的方法來解決這個問題。

您可以切換到使用border-top和:first-child代替：

http://jsfiddle.net/TJctn/6/

.reviewWrap { border-top: 1px solid #C9C9C9; margin: 0 0 20px; padding: 0 0 20px; }  
.reviewWrap:first-child { border-top: 0; margin: 0; padding: 0; }

你的第一.reviewWraps將有border-top刪除。

我不完全確定你想要用你的margin和padding做什麼，但你應該能夠調整它們以達到完美。

來源

2011-06-15 19:21:50 thirtydot

這是一個工作，但它很奇怪，BC當我顯示所有的人，當我點擊切換所有人都顯示，所以它應該打到最後一個孩子 – Lawrence 2011-06-15 19:28:58

當您將''追加到'.reviewList'的末尾時，'.reviewWrap：last-child'沒有匹配元素來選擇 - '：last-child'不是'.reviewWrap'。這裏有一個簡化的版本，沒有jQuery顯示問題：[http://jsfiddle.net/TJctn/7/](http://jsfiddle.net/TJctn/7/）。切換到'：first-child'絕對是你應該在這裏做的。 – thirtydot 2011-06-15 19:38:49

（不相關的問題，但我不得不修復'$（'。reviewsList'）。append'到'$（'。reviewList'）。append'讓扯蛋者出現） – thirtydot 2011-06-15 19:43:34

jquery與css最後一個孩子衝突

回答

相關問題