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）为类提供跨度。并在按钮的click事件中使用此类。

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

});`

上面的代码中的closest('.card-body')方法转到类为card-body的按钮的第一个祖先，并在其中搜索类为span-size的跨度

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

2 个答案: