javascript - 从最接近的 div 获取值(value)

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 的直接父元素，它是其中一个父元素的 sibling .这就是 closest() 上的 .flight-info 选择器不返回任何内容的原因。

实现您的要求的最简单方法是使用closest() 获取两个元素最近的公共(public)父级，在本例中为.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