Нисходящие селекторы

Соответствует элементам удовлетворяющим селектору inner, которые являются потомками (лежат внутри) элементов, удовлетворяющих селектору outer. В отличии от дочернего селектора (outer > inner), с помощью которого производится поиск элементов только на первом уровне вложенности в outer, нисходящий селектор задает поиск на всех уровнях вложенности.

Примеры использования:

$('div span')	вернет все span-элементы, которые лежат внутри элементов div.
$('div .lBlock .line')	вернет элементы с классом line, лежащие в элементах класса lBlock, которые в свою очередь находятся внутри div-элементов.
$('#foot *')	вернет все элементы, лежащие внутри элемента с идентификатором foot.

Содержание 1 В действии 1.1 Пример 1 1.2 Пример 2 2 Ссылки

В действии

Пример 1

Найдем бомбы в коробках (элементы класса bomb, лежащие внутри элементов класса box):

~lt~!DOCTYPE html~gt~
~lt~html~gt~
~lt~head~gt~
  ~lt~script src="https://code.jquery.com/jquery-latest.js"~gt~~lt~/script~gt~
  ~lt~style~gt~
    div, span {
      display: block;
      width: 60px;
      height: 60px;
      float: left;
      padding: 15px;
      margin: 5px;
      background-color: #EEEEEE;
      font-size: 18pt;
    }
  ~lt~/style~gt~
~lt~/head~gt~
~lt~body~gt~
  ~lt~div class="box"~gt~ ~lt~p class="fish"~gt~1~lt~/p~gt~ ~lt~/div~gt~
  ~lt~div class="box"~gt~ ~lt~p class="bomb"~gt~2~lt~/p~gt~ ~lt~/div~gt~
  ~lt~div class="box"~gt~ ~lt~p class="panties"~gt~3~lt~/p~gt~ ~lt~/div~gt~
  ~lt~div class="bookcase"~gt~ ~lt~p class="bomb"~gt~4~lt~/p~gt~ ~lt~/div~gt~

  ~lt~script~gt~
    $('.box .bomb').parent()
      .css('border', '3px solid red')
      ('Бомба, епт!');
  ~lt~/script~gt~
~lt~/body~gt~
~lt~/html~gt~

Пример 2

Найдем всех потомков, внутри второго ul-элемента, а внутри последнего ul-элемента найдем все дочерние элементы (с помощью дочернего селектора):

~lt~!DOCTYPE~gt~
~lt~html~gt~
~lt~head~gt~
  ~lt~meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /~gt~
  ~lt~script src="https://code.jquery.com/jquery-latest.js"~gt~~lt~/script~gt~
  ~lt~style~gt~
    body{
      font:10pt Arial,sans-serif; 
      color:#555;
    }
    ul{
      float:left; 
      margin:3px; margin-left:15px; 
      padding:10px 10px 5px 10px; 
      border:2px solid #ddd;
    }
    ul.matched{
      background:url('/tags/images/matched.png') 0% 2% no-repeat;
    }
    ul.result{
      position:relative; 
      left:-3px; 
      border:3px solid #ff8888;
    }
    li{
      position:relative; 
      float:left; 
      margin:7px; 
      padding:2px; 
      width:60px; 
      height:60px; 
      background-color:#e1e1e1; 
      border:2px solid #e1e1e1;
    }
    li.matched{
      background:#e1e1e1 url('/tags/images/matched.png') 5% 5% no-repeat;
    }
    li.result{
      margin-left:6px; 
      margin-right:6px; 
      width:60px; 
      height:60px; 
      border:3px solid #ff8888;
    }
    p{
      position:relative; 
      float:left; 
      width:16px; 
      height:16px;
      margin:2px; 
      background-color:#f4f4f4; 
      font-size:1pt;
    }
    p.matched{
      background:#f4f4f4 url('/tags/images/matched_mini.png') center no-repeat;
    }
    p.result{
      width:12px; 
      height:12px; 
      border:2px solid #ff8888;
    }
    .matched_addit{
      background:#f4f4f4 url('/tags/images/matched_mini.png') center no-repeat;
    }
    .srce{
      padding:16px 0; 
      text-align:center;
    } 
    .srce tt{
      color:#0088ff;
    }
    .tgName{
      position:absolute; 
      top:11px; left:45%; 
      font-size:8pt; 
      color:#b2ada1;
    }
    li .tgName{
      top:24px; 
      left:18px;
    } 
    li p .tgName{
      top:0; 
      left:1px; 
      font-size:7pt;
    }
    .top-element{
      padding-top:20px;
    }
    .clear{clear:both}
  ~lt~/style~gt~
~lt~/head~gt~
~lt~body~gt~
  ~lt~tt class="tgName"~gt~‹ul›~lt~/tt~gt~
  ~lt~ul~gt~
    ~lt~li~gt~~lt~tt class="tgName"~gt~‹li›~lt~/tt~gt~~lt~/li~gt~
    ~lt~li~gt~~lt~/li~gt~
    ~lt~li~gt~
      ~lt~p~gt~~lt~tt class="tgName"~gt~‹p›~lt~/tt~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~
      ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~
      ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~
    ~lt~/li~gt~
    ~lt~li~gt~~lt~/li~gt~
    ~lt~li~gt~~lt~/li~gt~
    ~lt~div class="clear" /~gt~
  ~lt~/ul~gt~
  ~lt~ul~gt~
    ~lt~li~gt~~lt~/li~gt~
    ~lt~li~gt~~lt~/li~gt~
    ~lt~li~gt~~lt~/li~gt~
    ~lt~li~gt~
      ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~
      ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~
      ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~
    ~lt~/li~gt~
    ~lt~li~gt~
      ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~
      ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~
      ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~
    ~lt~/li~gt~
    ~lt~div class="clear" /~gt~
  ~lt~/ul~gt~
  ~lt~ul~gt~
    ~lt~li~gt~
      ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~
      ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~
      ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~
    ~lt~/li~gt~
    ~lt~li~gt~~lt~/li~gt~
    ~lt~li~gt~~lt~/li~gt~
    ~lt~li~gt~~lt~/li~gt~
    ~lt~li~gt~~lt~/li~gt~
    ~lt~div class="clear" /~gt~
  ~lt~/ul~gt~

  ~lt~div class="clear top-element"~gt~~lt~p class="result"~gt~~lt~/p~gt~ – все найденные элементы.~lt~/div~gt~

  ~lt~script~gt~
    $('ul:eq(1) *').addClass('result');
    $('ul:last > *').addClass('result');
  ~lt~/script~gt~

~lt~/body~gt~
~lt~/html~gt~

Ссылки

• Остальные комбинации селекторов
• Список всех селекторов
• $( ) — функция jQuery