smsc banner 468x60smsc banner 728x90smsc banner 930x180skillbox banner 468x60skillbox banner 728x90skillbox banner 930x180etxt banner 468x60etxt banner 728x90etxt banner 930x180

Как получить дочерние элементы селектора в jQuery

Вы можете использовать метод find() для получения дочерних элементов селектора $(this) с помощью jQuery.

Код jQuery в следующем примере просто выберет дочерний элемент <img> и применит к нему некоторые CSS-стили при щелчке родительского элемента <div>.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Select the Child Element Inside a DIV On Click</title>
<style>
    .box{
        padding: 80px;
        border: 10px solid #999;
        text-align: center;
    }  
    .box img{
        width: 400px;
        border: 6px solid #999;
    }
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $(".box").click(function(){
        $(this).find("img").css("border-color", "blue");
    });
});
</script>
</head>
<body>
    <div class="box">
        <img src="images/sky.jpg" alt="Cloudy Sky">
    </div>
</body>
</html>

Если вы хотите получить только прямых потомков целевого элемента, вы также можете использовать метод children(). Метод children() перемещается только на один уровень вниз по дереву DOM, тогда как find() может перемещаться вниз на несколько уровней для выбора дочерних элементов (внуков и т. д.).

beget banner 480x320beget banner 728x90beget banner 120x600smsc banner 480x320smsc banner 728x90smsc banner 120x600etxt banner 480x320etxt banner 728x90etxt banner 120x600

Читайте также

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.

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

Как на jQuery написать код, который при клике на кнопку будет копировать текущий url сайта?

Вот пример кода на jQuery, который копирует текущий URL сайта в буфер обмена при нажатии на кнопку с классом copy-current-url: Как это работает: Этот подход работает в большинстве браузеров. Однако, если вы используете современные методы, можно также заменить document.execCommand на API navigator.clipboard, если поддержка браузера это позволяет.
Подробнее

Как на jQuery отслеживать событие ввода символов?

Для отслеживания события ввода символов на jQuery можно использовать событие input. Оно срабатывает каждый раз, когда происходит изменение в поле ввода (например, при наборе текста или удалении символов). Вот пример: В этом примере: Если нужно отследить событие только при изменении текста (например, при нажатии клавиш), можно использовать событие keyup, но input более универсально, так как…
Подробнее

Как на jQuery можно отслеживать изменение текстового тега

В jQuery изменение текста внутри тега можно отслеживать несколькими способами, в зависимости от того, как это изменение происходит. Основной подход — это использовать MutationObserver, так как он позволяет отслеживать изменения в DOM. Вот пример: 1. Использование MutationObserver 2. Событие через пользовательское изменение Если текст изменяется через jQuery или JavaScript (например, с помощью .text() или .html()),…
Подробнее