从最近的div中获取值

Question

我尝试在按钮单击事件中获取文本表单相同的 div。 这是我的 HTML 标记：

<div class="flights">
    <div class="flight-box">
        <div class="row">
            <div class="col-sm-3">
                <div class="flight-info">
                    <div class="left-i">
                        <img src="img/sp_trans.gif" class="airlogowidth airsprite airlogo A4">
                       <div class="flight-no">SG-264</div>
                    </div>
                    <div class="right-i">
                        <div class="name">Air India</div>
                    </div>
                </div>
            </div>
            <div class="col-sm-5">
                <div class="flight-duration">
                    <div class="row">
                        <div class="col-sm-4">
                            <div class="events">
                                <span class="text">Depart</span>
                                <span class="time">12:30 PM</span>
                                <span class="route">IXA <i class="fa fa-arrow-right"></i> CCU</span>
                            </div>
                        </div>
                        <div class="col-sm-4">
                            <div class="events">
                                <span class="text">Arrive</span>
                                <span class="time">03:10 PM</span>
                                <span class="route">IXA <i class="fa fa-arrow-right"></i> CCU</span>
                            </div>
                        </div>
                        <div class="col-sm-4">
                            <div class="events">
                                <span class="text">Duration</span>
                                <span class="time">1h 40m </span>
                                <span class="route">No Stop</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="fare-price">
                    <div class="row">
                        <div class="col-sm-6">
                            <span class="f-price">3999</span>
                        </div>
                        <div class="col-sm-6">
                            <div class="book-action">
                                <div class="btn-group-vertical" role="group">
                                    <button type="button" class="btn btn-danger btn-book" name="booknow">Book Now</button>
                                    <button type="button" class="btn text-primary btn-more-1" name="details">View More...</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <div class="flight-footer">
        <div class="row">
            <div class="col-sm-3">
                <div class="refund-status">
                    <span>Refundable</span>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="fare-role">
                    <a href="#">Fare rules</a>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="baggage-info">
                    <a href="#">Baggage Information</a>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="itinerary-info">
                    <a href="#">Flight itinerary</a>
                </div>
            </div>
        </div>
    </div>
    <div class="flight-itinerarySummary" style="display: none;">
    <div class="row">
        <div class="col-sm-12">
        <h2>Agartala → Bangalore <small>22 Nov 2015</small></h2>
        <ul class="itinerarySummary">
            <li class="vendor">
                <div class="airLogo fLeft">
                    <img src="img/airlines/AI.png" height="23" width="27">
                </div>
                <div class="airlineName">
                 <span class="name">Air India</span>
                 <small class="flightNumber">AI-744</small>
                 <small class="travelClass">Economy</small>
                 <small class="truncate" title=""></small>
               </div>
            </li>
            <li class="start">
                <time>
                 <span class="placeTime">
                    <span rel="tTooltip" original-title="Singerbhil, Agartala">IXA</span>
                    <strong>  11:20 </strong>
                 </span>
                 <span class="travelDate">22 Nov 2015</span> 
                </time> 
                <small class="terminal"> 

                  Singerbhil, Agartala
                </small>
            </li>
            <li class="details">
                <i class="clk itineraryClock"></i><abbr class="duration weak">50m</abbr> 
            </li>
            <li class="end">
               <time>
                <span class="placeTime">
                 <strong> 12:10 </strong>
                 <span rel="tTooltip" original-title="Netaji Subhas Chandra Bose Airport, Kolkata">CCU</span>
                </span>
                <span class="travelDate"> 22 Nov 2015 </span>
               </time>
               <small class="terminal">
                  Netaji Subhas Chandra Bose Airport, Kolkata, Terminal 2 
               </small>
            </li>
        </ul>
        <div class="connector weak">
            <small class="layOver">Layover : 5h 20m</small>
        </div>
        <ul class="itinerarySummary">
            <li class="vendor">
                <div class="airLogo fLeft">
                    <img src="img/airlines/AI.png" height="23" width="27">
                </div>
                <div class="airlineName">
                 <span class="name">Air India</span>
                 <small class="flightNumber">AI-744</small>
                 <small class="travelClass">Economy</small>
                 <small class="truncate" title=""></small>
               </div>
            </li>
            <li class="start">
                <time>
                 <span class="placeTime">
                    <span rel="tTooltip" original-title="Singerbhil, Agartala">IXA</span>
                    <strong>  11:20 </strong>
                 </span>
                 <span class="travelDate">22 Nov 2015</span> 
                </time> 
                <small class="terminal"> 

                  Singerbhil, Agartala
                </small>
            </li>
            <li class="details">
                <i class="clk itineraryClock"></i><abbr class="duration weak">50m</abbr> 
            </li>
            <li class="end">
               <time>
                <span class="placeTime">
                 <strong> 12:10 </strong>
                 <span rel="tTooltip" original-title="Netaji Subhas Chandra Bose Airport, Kolkata">CCU</span>
                </span>
                <span class="travelDate"> 22 Nov 2015 </span>
               </time>
               <small class="terminal">
                  Netaji Subhas Chandra Bose Airport, Kolkata, Terminal 2 
               </small>
            </li>
        </ul>
        </div>
    </div>
    </div>
</div>

我想要点击“btn-book”上的“flight-no”div html 即SG-264。 我尝试如下，但返回 'undefine' -

$('.btn-book').on('click', function(){
 var flightNo = $(this).closest('div.flight-info').parent('div.left-i').html();
 alert(flightNo);
});

请注意，页面中有许多行带有“航班”类。 有人帮我吗？

Answer 1

您当前代码的问题是.flight-info 元素不是.btn-book 的直接父元素，它是其中一个父元素的兄弟。这就是 closest() 上的 .flight-info 选择器不返回任何内容的原因。

实现所需的最简单方法是使用closest() 获取两个元素最近的公共父级，在本例中为.flight-box，然后使用find() 和text() 获取航班号。试试这个：

$('.btn-book').on('click', function(){
   var flightNo = $(this).closest('div.flight-box').find('.flight-no').text();
   alert(flightNo); // = SG-264 given your example
});

Example fiddle

Answer 2

你需要使用 .find() 和 .closest() 并且 div.left-i 是 div 的孩子.flight-info 不是 parent()

这样使用

$('.btn-book').on('click', function(){
 var flightNo = $(this).closest('.flight-box').find('div.left-i .flight-no').html();
 alert(flightNo);
});

DEMO