Единственные элементы в своих родителях

Материал из JQuery

Текущая версия на 17:21, 9 ноября 2013

Соответствует элементам, которые являются единственными в своих непосредственных предках.

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

В действии

Отметим все спутники, являющиеся единственными для своей планеты (элементы класса satellite (спутник), являющиеся дочерними элементами planet (планета)):

~lt~!DOCTYPE html~gt~
~lt~html~gt~
~lt~head~gt~
  ~lt~script src="http://code.jquery.com/jquery-latest.js"~gt~~lt~/script~gt~
  ~lt~style~gt~
    .satellite{
      width: 50px;
      height: 25px;
      float: left;
      padding: 12px;
      margin: 5px;
      background-color: #eee;
      font-size: 10pt;
    }
    .planet{
      float: left;
      width: 85px;
      padding: 15px;
      margin: 5px;
      background-color: #eeffee;
      font-size: 14pt;
	  text-align:center;	
	}
  ~lt~/style~gt~
~lt~/head~gt~
~lt~body~gt~
  ~lt~div class="planet"~gt~ 
    Венера
  ~lt~/div~gt~
  ~lt~div class="planet"~gt~ 
    Земля
    ~lt~div class="satellite"~gt~Луна~lt~/div~gt~
  ~lt~/div~gt~
  ~lt~div class="planet"~gt~ 
    Марс
    ~lt~div class="satellite"~gt~Деймос~lt~/div~gt~
    ~lt~div class="satellite"~gt~Фобос~lt~/div~gt~
  ~lt~/div~gt~

~lt~script~gt~
    $(".planet .satellite:only-child").css({"border":"1px solid red"});
~lt~/script~gt~
~lt~/body~gt~
~lt~/html~gt~

Ссылки

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