список родитель / ребенок - PullRequest
Новая
       2

список родитель / ребенок

0 голосов
/ 02 июля 2011

Я новичок в jQuery.Мне нравится использовать jQuery, и я пытаюсь стать лучше.

У меня есть следующий список в виде меню:

Страница дома: нет детей 

<ul class="menu">
<li>Team 1 Photos</li>
<li>Team 2 Photos</li>
<li>Group Activities</li>
</ul>

Подпрограммастраница имеет дочерний элемент 

<ul class="menu">
<li>Team 1 Photos</li>
<li>Team 2 Photos</li>
<li>Group Activities
    <ul class="children">
    <li>Team 1 News</li>
    <li>Team 2 News</li>
</ul>
</li>
</ul>

Мой код CSS: 

ul.children {
    width: auto;
    margin-left: 0;
}
ul.children li{
    border-bottom:1px solid #999;
    margin-bottom: 10px;
   padding-bottom: 3px;
}
ul.children li:last-child{
    border-bottom:1px solid #999 !important;
}
ul.menu {
    width: auto;
    margin-left: 0;
}
ul.menu li{
    border-bottom:1px solid #999;
    margin-bottom: 10px;
   padding-bottom: 3px;
}
ul.menu li:last-child{
    border-bottom:none;
}

Я пытаюсь достичь;последний <li> имеет границу-дно, если нет ребенка.последний <li> не имеет границы, если есть дочерний элемент

Надеюсь, у меня есть смысл

Я пробовал способ либо напрямую применить границу да / нет, либо добавить класс так,Я могу применить стиль: 

jQuery('#menu ul li:has(ul)').parent('li').prev()).css('border','1px solid #000');

if (jQuery('.menu li:has(ul)') ) {
  ('ul.menu li:last-child').add Class('borderme');

jQuery('.menu li:has(ul)').append('borderyes');

Сейчас я застрял, поэтому, пожалуйста, направьте меня в правильном направлении, чтобы я мог научиться достигатьэто.

Спасибо

LRL

Ответы [ 3 ]

0 голосов
/ 02 июля 2011

Вы могли бы упростить вашу CSS. 

ul.menu, ul.children {
        width: auto;
        margin-left: 0;
    }
ul.menu li{
        border-bottom:1px solid #999;
        margin-bottom: 10px;
        padding-bottom: 3px;
    }

Вам не нужны отдельные стили для .children, потому что селектор потомков на .menu позаботится обо всех <li> в вашей разметке. Все <li> в пределах .menu теперь будут иметь границу. Чтобы удалить границу из последнего дочернего элемента <li> из .menu, если у него есть подменю, вы можете использовать следующий код. 

$('ul.menu > li:last-child').has('ul').css('border-bottom','none');

Обратите внимание, что я использовал дочерний селектор в jquery вместо потомкового селектора.

0 голосов
/ 03 июля 2011

После небольшого тестирования с помощью Эдгара и Амрита я остановился на этом 

jQuery('.menu li').has('ul').css({'border' : 'none','margin-bottom' : '0'});

Эдгар Я не мог заставить ваше решение работать, вероятно, что-то, что я сделал. Однако, когда я впервые проверил ваше решение, оно сработало, но когда я изменил имена страниц, оно перестало работать.

Я ценю то время, которое вы потратили на то, чтобы помочь мне найти решение

Приветствие НПН

0 голосов
/ 02 июля 2011

здесь у вас есть одно решение: 

ul.children {
        width: auto;
        margin-left: 0;
    }
    ul.children li{
        border-bottom:1px solid #999;
        margin-bottom: 10px;
       padding-bottom: 3px;
    }
    /* Remove this css rule
    ul.children li:last-child{
        border-bottom:1px solid #999 !important;
    }
    */
    ul.menu {
        width: auto;
        margin-left: 0;
    }
    ul.menu li{
        border-bottom:1px solid #999;
        margin-bottom: 10px;
       padding-bottom: 3px;
    }
    /* Remove this css rule
    ul.menu li:last-child{
        border-bottom:none;
    }*/

И, иметь следующий jquery: 

$(document).ready(function(){
    $("ul.menu li:last-child:has(ul)").css("border-bottom", "none");
});

Мы удаляем границу только в том случае, если у li есть ребенок.

Надеюсь, это поможет. ура Надеюсь, это поможет, ура.

...