Выберите элемент в зависимости от количества дочерних элементов он содержит?

A

Ahmad

Постоялец
Регистрация
4 Май 2013
Сообщения
86
Реакции
1
У меня есть HTML код, подобный этому:



Код: 
<div class="main"></div>
<div class="span2">
    <div><a href="xyz71">List 1</a></div>
    <div>
        <ul>
            <li><a href="xyz71_72">Cat 11</a>
            </li>
            <li><a href="xyz71_73">Cat 12</a>
            </li>
            <li><a href="xyz71_76">Cat 13</a>
            </li>
            <li><a href="xyz71_78">Cat 14</a>
            </li>
        </ul>
    </div>
</div>
<div class="span2">
    <div><a href="xyz90">List 2</a></div>
    <div>
        <ul>
            <li><a href="xyz90_91">Cat 211</a>
            </li>
            <li><a href="xyz90_92">Cat 212</a>
            </li>
            <li><a href="xyz90_93">Cat 213</a>
            </li>
        </ul>
    </div>
    <div>
        <ul>
            <li><a href="xyz90_91">Cat 221</a>
            </li>
            <li><a href="xyz90_92">Cat 222</a>
            </li>
            <li><a href="xyz90_93">Cat 223</a>
            </li>
            <li><a href="xyz90_94">Cat 224</a>
            </li>
            <li><a href="xyz90_95">Cat 225</a>
            </li>
            <li><a href="xyz90_96">Cat 226</a>
            </li>
        </ul>
    </div>
</div>

'main' является материнской div. это имеет 2 ребенка div, оба из class 'span2'. Первый 'span2' div имеет только 2 дочерних элементов. Но второй 'span2' div имеет 3 дочерних элементов.

Я хочу, чтобы найти те div, которые находятся внутри 'main' div которые содержат ровно 3 дочерних элементов. Если такой элемент найден, border должны применяться вокруг этого элемента. Так что в моем коде, второй элемент 'span2' div должны получить рамкой.

Я нашел следующий код для этой цели, но я не могу найти способ использовать его здесь.



Код: 
li:first-child:nth-last-child(3),
li:first-child:nth-last-child(3) ~ li {
    width: 33.3333%;
}

Может ли кто-нибудь помочь мне с этим?
 
С помощью jquery легко,
Код: 
$('.span2').each(function(indx){
    if($(this).find('div').size() == 3){
      $(this).css('border','1px solid red');
    });

}
 
Код: 
<html><head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo</title>

  <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script>



  <link rel="stylesheet" type="text/css" href="/css/result-light.css">

  <style type="text/css">

  </style>



<script type="text/javascript">//<![CDATA[
$(window).load(function(){

jQuery.noConflict();
jQuery(document).ready(function($) {
  $('.span2').each(function(indx){
    if($(this).find('div').size() == 3){
      $(this).css('border','1px solid red');
    }
    });

});
});//]]>

</script>


</head>
<body>
  <div class="main"></div>
<div class="span2">
    <div><a href="xyz71">List 1</a></div>
    <div>
        <ul>
            <li><a href="xyz71_72">Cat 11</a>
            </li>
            <li><a href="xyz71_73">Cat 12</a>
            </li>
            <li><a href="xyz71_76">Cat 13</a>
            </li>
            <li><a href="xyz71_78">Cat 14</a>
            </li>
        </ul>
    </div>
</div>
<div class="span2">
    <div><a href="xyz90">List 2</a></div>
    <div>
        <ul>
            <li><a href="xyz90_91">Cat 211</a>
            </li>
            <li><a href="xyz90_92">Cat 212</a>
            </li>
            <li><a href="xyz90_93">Cat 213</a>
            </li>
        </ul>
    </div>
    <div>
        <ul>
            <li><a href="xyz90_91">Cat 221</a>
            </li>
            <li><a href="xyz90_92">Cat 222</a>
            </li>
            <li><a href="xyz90_93">Cat 223</a>
            </li>
            <li><a href="xyz90_94">Cat 224</a>
            </li>
            <li><a href="xyz90_95">Cat 225</a>
            </li>
            <li><a href="xyz90_96">Cat 226</a>
            </li>
        </ul>
    </div>
</div>






</body></html>
Фигурную скобку забыл закрыть
if($(this).find('div').size() == 3){
по этому и не работало
 
Он работает сейчас, спасибо.

Вы можете изменить его на только искать 'span2' div, которые находятся внутри 'main' div? Потому что я не хочу, чтобы это CSS применить к 'span2' div в других местах в моем сайте.
 
могу но как видно из кода блок
<div class="main"></div>
закрывается выше блоков span
но если блоки .span будут внутри #main то тогда так
Код: 
<script type="text/javascript">//<![CDATA[
$(window).load(function(){

jQuery.noConflict();
jQuery(document).ready(function($) {
  $('#main .span2').each(function(indx){
    if($(this).find('div').size() == 3){
      $(this).css('border','1px solid red');
    }
    });

});
});//]]>

</script>
 
Войдите или зарегистрируйтесь для ответа.
Назад
Сверху