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

Тема в разделе "Верстка", создана пользователем Ahmad, 22 сен 2013.

Информация :
Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела и Правилами форума
Для быстрого поиска ответов на ваши вопросы воспользуйтесь Картой раздела и/или Поиском по разделу
Модераторы: ultra
  1. Ahmad

    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%;
    }
    Может ли кто-нибудь помочь мне с этим?
     
  2. vipTelnet

    vipTelnet Постоялец

    Регистр.:
    14 янв 2013
    Сообщения:
    135
    Симпатии:
    11
    С помощью jquery легко,
    Код:
    $('.span2').each(function(indx){
        if($(this).find('div').size() == 3){
          $(this).css('border','1px solid red');
        });
    
    }
     
  3. Ahmad

    Ahmad Постоялец

    Регистр.:
    4 май 2013
    Сообщения:
    86
    Симпатии:
    1
  4. BDSG

    BDSG

    Регистр.:
    28 фев 2009
    Сообщения:
    203
    Симпатии:
    109
  5. vipTelnet

    vipTelnet Постоялец

    Регистр.:
    14 янв 2013
    Сообщения:
    135
    Симпатии:
    11
    Код:
    <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){
    по этому и не работало
     
  6. Ahmad

    Ahmad Постоялец

    Регистр.:
    4 май 2013
    Сообщения:
    86
    Симпатии:
    1
    Он работает сейчас, спасибо.

    Вы можете изменить его на только искать 'span2' div, которые находятся внутри 'main' div? Потому что я не хочу, чтобы это CSS применить к 'span2' div в других местах в моем сайте.
     
  7. vipTelnet

    vipTelnet Постоялец

    Регистр.:
    14 янв 2013
    Сообщения:
    135
    Симпатии:
    11
    могу но как видно из кода блок
    <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>