Как достать элемент из полученного html с помощью jQuery?

Question

$(".modal-window").on("click", (e) => {
  let $html = $(e.target).parent()[0];
  console.log($html);
});

.modal-window {
  background: gray;
  padding: 12px;
  width: 128px;
  border-radius: 12px;
  margin: 6px;
  display: inline-block;
}
.modal-title {
  color: #fff;
}
.apply-button {
  background-color: #fff;
  padding: 4px;
  text-align: center;
  margin: 4px auto;
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="modal-window">
    <div class="modal-title">
        <div class="modal-title">Текст который нужно достать 1</div>
        <div class="modal-close hadjj-combined_close"></div>
    </div>
    <div class="modal-content">
        <div class="md-content">
            <div class="md-title">Программа включает:</div>
            <div class="md-cond">
            ... Какой-то HTML
            </div>
        </div>
    </div>
    <div class="apply-button">Достать текст</div>
</div>
<div class="modal-window">
    <div class="modal-title">
        <div class="modal-title">Текст который нужно достать 2</div>
        <div class="modal-close hadjj-combined_close"></div>
    </div>
    <div class="modal-content">
        <div class="md-content">
            <div class="md-title">Программа включает:</div>
            <div class="md-cond">
            ... Какой-то HTML
            </div>
        </div>
    </div>
    <div class="apply-button">Достать текст</div>
</div>
<div class="modal-window">
    <div class="modal-title">
        <div class="modal-title">Текст который нужно достать 3</div>
        <div class="modal-close hadjj-combined_close"></div>
    </div>
    <div class="modal-content">
        <div class="md-content">
            <div class="md-title">Программа включает:</div>
            <div class="md-cond">
            ... Какой-то HTML
            </div>
        </div>
    </div>
    <div class="apply-button">Достать текст</div>
</div>

Вывод от клика на определенную кнопку такой:

<div class="modal-window">
    <div class="modal-title">
        <div class="modal-title">Текст который нужно достать 2</div>
        <div class="modal-close hadjj-combined_close"></div>
    </div>
    <div class="modal-content">
        <div class="md-content">
            <div class="md-title">Программа включает:</div>
            <div class="md-cond">
            ... Какой-то HTML
            </div>
        </div>
    </div>
    <div class="apply-button">Достать текст</div>
</div>

Так в консоли(при клике на второй блок)

Как достать оттуда именно элемент с текстом "Текст который нужно достать $"?

Answer 1

$(".modal-window").on("click", function(e) {
  let text = $(this).find(".modal-title .modal-title").text();
  console.log(text);
});

Answer 2

$('.modal-window').click(({currentTarget})=>{
    // let txt = $(currentTarget).find('.modal-title:first > .modal-title:first').text();
    let txt = $(currentTarget).find('.modal-title:first').children('.modal-title:first').text();
    console.log(txt);
});

пс :first, чтобы jq не искал дальше, а брал первый

псс .first() || eq(0) берет первый из всех найденных

БЛОГ НА HUSL

Как достать элемент из полученного html с помощью jQuery?

Ответы (2 шт):