如何从作为按钮父级的div获取特定元素？

Question

在尝试根据单击按钮的位置获取特定元素的内容时，我遇到了一些问题。

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'>&#xe227;</i><span> Price </span>
                                        </div>
                                        <div class='col-md-6'>
                                            <i class='material-icons'>&#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'>&#xe227;</i><span> Price </span>
                                            </div>
                                            <div class='col-md-6'>
                                                <i class='material-icons'>&#xe0c8;</i><span>City2</span>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                                <button class="btn btn-danger saveAd">Save</button>
                            </div>
                        </div>
                    </div>

如果有人点击第二个按钮，我如何获得包含文本City2的span元素的内容？我尝试过这样的事情：

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

当然它不起作用..我应该怎么做？

Answer 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/

Answer 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的跨度