Проверьте, имеет ли LI «родительский» LI, используя jQuery?

Я работаю над разделом комментариев в теге WP, и для стилизации требуется использование некоторого умного jQuery, чтобы заставить его работать правильно ... Однако при попытке стилизовать комментарии администратора в длинном вложенном UL, я возникают проблемы, пересекающие DOM с JQuery, чтобы найти элементы, которые мне нужно настроить CSS для ...Проверьте, имеет ли LI «родительский» LI, используя jQuery?

Вот что я попытался с помощью:

$('.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 был родителем 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/

источник

2010-06-22 Josh

Какова Ваша структура HTML? –

Всего секунду, и я опубликую образец. – Josh

Если я не ошибаюсь, это похоже на то, с чем вы должны справиться с прямым CSS. – R0MANARMY

Если только Я ошибаюсь, все вложенные находятся под классом .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; 
}

EDIT:

Казалось бы, как если бы ваши 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, должны переопределять т.

источник

2010-06-22 16:03:37 user113716

Да, я мог бы сделать это с помощью CSS ... Однако, как я уже говорил в предыдущем комментарии, css становится чрезвычайно раздутым, когда мне приходится переопределять стили для non-admin против администратора на разных уровнях вложенности. Вот почему я решил попробовать сделать это с помощью jQuery. Я разместил онлайн-пример, чтобы каждый мог видеть, о чем я говорю: http://joshjones.me/comment-test/ – Josh

@Josh - Итак, у вас есть 3 стиля: 1. администратор верхнего уровня, 2 вложенный администратор, 3. все остальные. Это правильно? – user113716

На самом деле существует 4 ... 1. Верхний уровень не-администратора 2. Администратор верхнего уровня 3. Ребенок не-администратор 4.Администратор ребенка – Josh

Проверьте, имеет ли LI «родительский» LI, используя jQuery?

ответ

Смежные вопросы