檢查LI是否有使用jQuery的「parent」LI？

Question

我正在研究WP主題的評論部分，並且樣式需要使用一些聰明的jQuery才能使其正常工作......但是，當試圖在長嵌套UL中設計管理註釋時，我「M有麻煩穿越與jQuery DOM來找到我需要調整......

這裏的CSS元素就是我嘗試使用：

$('.commentlist li.admin').each(function() { 
    if ($(this).parents('li').size() > 0) { 
    //Has parent LI, so this is a child comment 
    $(this).children('.avatar').css({'background-position':'right -2530px'}); 
    $(this).children('.avatar img').css({'border-right':'1px solid #fff','border-bottom':'1px solid #fff'}); 
    } 
    else { 
    //Has no parent LI, top level comment 
    $(this).children('.avatar').css({'background-position':'0 -2530px'}); 
    $(this).children('.avatar img').css({'border-right':'1px solid #fff','border-bottom':'1px solid #fff'}); 
    } 
}); 

基本上我想應用某些樣式「頂層」LI元素中的元素具有「admin」類，並將另一組樣式應用於「嵌套」LI元素中類別爲「admin」的元素。

我認爲，通過檢查，看是否LI元素有一個父李那麼這將是一個快速的方法來做到這一點，但我顯然繞了錯誤的方式...

任何想法？

PS-這裏是我的HTML結構的一個樣本：

  <ul class="commentlist"> 
      <li> 
       <div class="border-fake"> 
        <div class="comment-header"> 
         <small>3rd may, 2009</small> 
         <div class="rank rank2"></div> 
        </div><!--/comment-header--> 
        <div class="comment-body"> 
         <div class="avatar"> 
          <img src="http://www.gravatar.com/avatar/3b3be63a4c2a439b013787725dfce802?s=61" /> 
         </div><!--/avatar--> 
         <h4 class="comment-author">Joe Bloggs</h4> 
         <small class="author-url">ohmygodisuck.me</small> 
         <div class="clearit"></div> 
         <div class="comment-text"> 
          <p>Amet! Ut aliquam tempor sit tempor. In, placerat, mattis mid porta pid? Vut ut tincidunt ac, porta placerat nisi auctor elit? Dignissim vel! Amet.</p> 
          <p>Amet! Ut aliquam tempor sit tempor. In, placerat, mattis mid porta pid? Vut ut tincidunt ac, porta placerat nisi auctor elit? Dignissim vel! Amet.</p> 
         </div><!--/comment-text--> 
         <div class="reply"> 
          <a href="#">reply</a> 
         </div><!--/reply--> 
        </div><!--/comment-body--> 
       </div><!--/border-fake--> 
      </li> 
      <li class="admin"> 
       <div class="border-fake"> 
        <div class="comment-header"> 
         <small>3rd may, 2009</small> 
         <div class="rank rankadmin"></div> 
        </div><!--/comment-header--> 
        <div class="comment-body"> 
         <div class="avatar"> 
          <img src="http://www.gravatar.com/avatar/e610fd44bdd000891b3a67a22d1676b7?s=61" /> 
         </div><!--/avatar--> 
         <h4 class="comment-author">Jamie Carter</h4> 
         <small class="author-url">jamiecarter.me</small> 
         <div class="clearit"></div> 
         <div class="comment-text"> 
          <p>Amet! Ut aliquam tempor sit tempor. In, placerat, mattis mid porta pid? Vut ut tincidunt ac, porta placerat nisi auctor elit? Dignissim vel! Amet.</p> 
          <p>Amet! Ut aliquam tempor sit tempor. In, placerat, mattis mid porta pid? Vut ut tincidunt ac, porta placerat nisi auctor elit? Dignissim vel! Amet.</p> 
         </div><!--/comment-text--> 
         <div class="reply"> 
          <a href="#">reply</a> 
         </div><!--/reply--> 
        </div><!--/comment-body--> 
       </div><!--/border-fake--> 
       <ul class="children"> 
        <li> 
         <div class="border-fake"> 
          <div class="comment-header"> 
           <small>3rd may, 2009</small> 
           <div class="rank rank4"></div> 
          </div><!--/comment-header--> 
          <div class="comment-body"> 
           <div class="avatar"> 
            <img src="http://www.gravatar.com/avatar/3b3be63a4c2a439b013787725dfce802?s=44" /> 
           </div><!--/avatar--> 
           <div class="comment-text"> 
            <p>Amet! Ut aliquam tempor sit tempor. In, placerat, mattis mid porta pid? Amet! Ut aliquam tempor sit tempor. In, placerat, mattis mid porta pid? Vut ut tincidunt ac, porta placerat nisi auctor elit? Dignissim vel! Amet. Vut ut tincidunt ac, porta placerat nisi auctor elit? Dignissim vel! Amet.</p> 
            <p>Amet! Ut aliquam tempor sit tempor. Amet! Ut aliquam tempor sit tempor. In, placerat, mattis mid porta pid? Vut ut tincidunt ac, porta placerat nisi auctor elit? Dignissim vel! Amet. In, placerat, mattis mid porta pid? Vut ut tincidunt ac, porta placerat nisi auctor elit? Amet! Ut aliquam tempor sit tempor. In, placerat, mattis mid porta pid? Vut ut tincidunt ac, porta placerat nisi auctor elit? Dignissim vel! Amet. Dignissim vel! Amet.</p> 
            <div class="clearit"></div> 
            <h4 class="comment-author">Weird Guy</h4> 
            <small class="author-url">howdydoo.com</small> 
           </div><!--/comment-text--> 
           <div class="reply"> 
            <a href="#">reply</a> 
           </div><!--/reply--> 
          </div><!--/comment-body--> 
         </div><!--/border-fake--> 
        </li> 
        <li> 
         <div class="border-fake"> 
          <div class="comment-header"> 
           <small>3rd may, 2009</small> 
           <div class="rank rank1"></div> 
          </div><!--/comment-header--> 
          <div class="comment-body"> 
           <div class="avatar"> 
            <img src="http://www.gravatar.com/avatar/3b3be63a4c2a439b013787725dfce802?s=44" /> 
           </div><!--/avatar--> 
           <div class="comment-text"> 
            <p>Amet! Ut aliquam tempor sit tempor. In, placerat, mattis mid porta pid? Vut ut tincidunt ac, porta placerat nisi auctor elit? Dignissim vel! Amet.</p> 
            <p>Amet! Ut aliquam tempor sit tempor. In, placerat, mattis mid porta pid? Vut ut tincidunt ac, porta placerat nisi auctor elit? Dignissim vel! Amet.</p> 
            <div class="clearit"></div> 
            <h4 class="comment-author">Jimbo Wilson</h4> 
            <small class="author-url">countrybumpkin.com</small> 
           </div><!--/comment-text--> 
           <div class="reply"> 
            <a href="#">reply</a> 
           </div><!--/reply--> 
          </div><!--/comment-body--> 
         </div><!--/border-fake--> 
        </li> 
       </ul> 
      </li> 
     </ul> 

和公正的良好措施，這裏是一個在線演示，所以你可以看到發生了什麼事情，什麼是不是...... http://joshjones.me/comment-test/

Answer 1

除非我錯了，嵌套的全部都在.children之下，對吧？

那麼，爲什麼不這樣的事情：

ul.commentlist > li.admin > .border-fake > .comment-body > .avatar { 
    background-position: right -2530px; 
} 
ul.commentlist > li.admin > .border-fake > .comment-body > .avatar > img { 
    border-right:1px solid #fff; 
    border-bottom:1px solid #fff; 
} 

ul.children .avatar { 
    background-position:0 -2530px; 
} 
ul.children .avatar > img { 
    border-right:1px solid #fff; 
    border-bottom:1px solid #fff; 
} 

---

編輯：

這似乎好像你的4個獨特的選擇對將是：

<!-- Top level non-admin --> 
ul.commentlist > li > .border-fake > .comment-body > .avatar 
ul.commentlist > li > .border-fake > .comment-body > .avatar > img 

    <!-- Top level admin (should override non-admin) --> 
ul.commentlist > li.admin > .border-fake > .comment-body > .avatar 
ul.commentlist > li.admin > .border-fake > .comment-body > .avatar > img 

    <!-- Nested level non-admin --> 
ul.children > li > .border-fake > .comment-body > .avatar 
ul.children > li > .border-fake > .comment-body > .avatar > img 

    <!-- Nested level admin (should override non-admin) --> 
ul.children > li.admin > .border-fake > .comment-body > .avatar 
ul.children > li.admin > .border-fake > .comment-body > .avatar > img 

的與.admin類的人應該重寫那些withou噸。