Как получить определенный элемент из div, который является родительским для кнопки?

#javascript #jquery #dom

Вопрос:

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

divs выглядит следующим образом:

         <div class="row">
                <div class="col-2">
                    <div class="card" style="width: 18rem;">
                        <img class='card-img-top' src="" alt='Card image cap'>
                        <div class='card-body text-center'>
                            <p class='card-text text-center' style='color: black'> Model</p>
                            <ul class='list-group list-group-flush'>
                                <li class='list-group-item'>
                                    <div class='row'>
                                        <div class='col-md-6'>
                                            <i class='material-icons'>amp;#xe227;</i><span> Price </span>
                                        </div>
                                        <div class='col-md-6'>
                                            <i class='material-icons'>amp;#xe0c8;</i><span>City1</span>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                            <button class="btn btn-danger saveAd">Save</button>
                        </div>
                    </div>
                </div>
            <div class="row">
                    <div class="col-2">
                        <div class="card" style="width: 18rem;">
                            <img class='card-img-top' src="" alt='Card image cap'>
                            <div class='card-body text-center'>
                                <p class='card-text text-center' style='color: black'> Model</p>
                                <ul class='list-group list-group-flush'>
                                    <li class='list-group-item'>
                                        <div class='row'>
                                            <div class='col-md-6'>
                                                <i class='material-icons'>amp;#xe227;</i><span> Price </span>
                                            </div>
                                            <div class='col-md-6'>
                                                <i class='material-icons'>amp;#xe0c8;</i><span>City2</span>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                                <button class="btn btn-danger saveAd">Save</button>
                            </div>
                        </div>
                    </div>

Если кто-то нажмет на вторую кнопку, как я могу получить содержимое элемента span с текстом City2?
Я пробовал что-то вроде этого:

        $('.btn.btn-danger.saveAd').on('click', function () {
            console.log("Button pressed!");
            console.log($(this).find('span-size').text());
        });

Конечно, это не работает .. как мне это сделать?

1. Какую логику вы используете для выбора правильного диапазона? В приведенном примере у вас есть два из них, которые попадают под родительский div кнопки.

2. span-size не является допустимым селектором. Кроме того, у кнопки нет дочерних элементов, поэтому find() она ничего не найдет.

3. В зависимости от того, где расположена кнопка, мне нужно получить город, цену и модель. Если нажата первая кнопка, мне нужно получить значения из первого div и так далее

4. $(this).closest('.card').find(whateverOtherThingInTheCardYouNeed) find() идет вниз по дереву DOM. closest() идет вверх.

5. Это сработало! Спасибо!!

Ответ №1:

Я не знаю, все ли я понял.

Вы хотите отображать текст последнего интервала при нажатии кнопки отправки, верно? Итак, сделайте это:

 $('.btn.btn-danger.saveAd').on('click', function () {
    var lastSpanElement = $(this).closest('div').find('span:eq(1)');

    alert(lastSpanElement.text());
});

https://jsfiddle.net/thiagotrss/v8c70m1k/2/

1. Если вы просто собираетесь повторно обернуть элемент с помощью $() , не разбивайте его с помощью [] . Используйте eq(#) вместо этого.

2. Не eq() Я имел в виду, но это тоже сработало бы

Ответ №2:

Дайте класс промежутку с текстом, City2 например span-size . И используйте этот класс в событии нажатия кнопки

 $('.btn.btn-danger.saveAd').on('click',   
function () { 
 console.log($(this).closest('.card-body').find('.span-size').text());

});`

closest('.card-body') Метод в приведенном выше коде переходит к первому предку кнопки с классом card-body и ищет в нем промежуток с классом span-size