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

Опубликовал: admin Sunday, June 16, 2024 в категории jQuery, Подборка рецептов | Пока нет комментариев

Решение

Решить задачу поможет фильтр :only-child (листинг 1.9.3).

Листинг1 .9 .3 . Использование фильтра :only-child

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-1-9-4</title>
<content>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<style type="text/css"> div {
width:100px;
height:100px; margin:5px; padding:5px; float:left; background-color:#b9e;
}
</style>
<script type="text/javascript">
$(function(){
$("div button:only-child").text("only-child").css("border", "1px solid #f00");
});
</script>
</head>
<body>
<button>Кнопка</button>
<button>Кнопка</button>
<button>Кнопка</button>
Это текст
<button>Кнопка</button>
<button>Кнопка</button>
<button>Кнопка</button>
<button>Кнопка</button>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>example-1-9-4</title>

width:100px;

height:100px; margin:5px; padding:5px; float:left; background-color:#b9e;

}

</style>

$(function(){

$("div button:only-child").text("only-child").css("border", "1px solid #f00");

});

</script>

</head>

<body>

<button>Кнопка</button>

Это текст

<button>Кнопка</button>

</body>

</html>

В HTML-коде из листинга 1.9.3 можно обнаружить пять элементов div. В одном из них содержится текст, в остальных — элементы button. Но только в двух элементах div кнопки button являются единственными наследниками. Посмотрим JavaScriptкод — выражение div button:only-child позволяет быстро отыскать данные элементы. Для наглядности заменяем надписи и задаем кнопкам красную рамку.

Источник: Самков Г. А. jQuery. Сборник рецептов. — 2-е изд., перераб. и доп. — СПб.: БХВ-Петербург, 2011. — 416 с.: ил. + CD-ROM — (Профессиональное программирование)

Популярное

Категории

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

Решение

Похожие посты:

Комментировать Cancel reply