Question

我如何抓住文本＆＃39; Peanut Brownie＆＃39;当按下按钮时。

 <div class="col-sm-4 col-lg-4 col-md-4">
    <div class="thumbnail">
        <img src="images/peanutBrownie320x150.jpg" alt="afghan">
        <div class="caption">
            <h4 class="pull-right">$12.00</h4>
            <h4>Peanut Brownie</h4>
            <p>One Dozen (12)</p>
                <div class="row">
                    <div class=".col-md-8 addToCart">
                    <button type="button" class="btn btn-primary">Add to Cart</button>
                    </div>
                </div>
        </div>
    </div>
</div>

我试过......

$( "button" ).on( "click", function() 
 {
 alert( $(this).closest('h4').text() )
 });

和其他一些技巧，但只是得到一个空警报。

Answer 1

closest没有选择结束匹配元素，它会选择最匹配的父元素。目标元素是div父元素的兄弟。你可以编码：

$("button").on( "click", function() {
    alert( $(this).closest('.row').prevAll('h4').first().text() )
});

请注意，我使用.first()方法选择第一个h4元素，因为text方法返回所有选定元素的textContent。

Answer 2

您可以获得距离div最近的h4，然后是该div的最后一个h4孩子

＆＃13;

$( "button" ).on( "click", function() 
{
  alert( $(this).closest('div:has(h4)').children('h4:last-of-type').text() )
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm-4 col-lg-4 col-md-4">
    <div class="thumbnail">
        <img src="images/peanutBrownie320x150.jpg" alt="afghan">
        <div class="caption">
            <h4 class="pull-right">$12.00</h4>
            <h4>Peanut Brownie</h4>
            <p>One Dozen (12)</p>
                <div class="row">
                    <div class=".col-md-8 addToCart">
                    <button type="button" class="btn btn-primary">Add to Cart</button>
                    </div>
                </div>
        </div>
    </div>
</div>

＆＃13;

在h4中选择文本

2 个答案: