如何檢查特定的SPAN類內容文本

Question

想要檢查特定的SPAN類上下文文本嗎？ 我想檢查的SPAN類是具有公里數（如27公里）的「距離」。

嘗試下面的代碼，但仍然沒有工作

if ($('.trip-summary-info').find('distance').length > 0) { 
 
    alert("Working !!!");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="trip-summary-info"> 
 
    <h3> 
 
    <a href="javascript:void(0);" class="back_first"> 
 
     <span class="chevron-up"><i class="fa fa-chevron-up"></i></span> Booking Summary: &nbsp; 
 
     <span class="date-time"></span>07-07-2017 09:05<span class="distance">, 99.84 kilometers</span><span class="duration">, 1 hrs 13 mins</span> 
 
    </a> 
 
    <span class="custom-btn custom-btn-default edit back_first"><a href="javascript:void(0);"><i class="fa fa-pencil"></i></a></span> 
 
    </h3> 
 
    <div class="trip_status custom-clearfix"> 
 
    <span class="location-form-marker"><i class="fa fa-map-marker"></i></span> 
 
    <div class="location-form"></div> 
 
    <div class="list-address-point" style="display:unset;"></div> 
 
    <span class="location-to-marker"><i class="fa fa-map-marker"></i></span> 
 
    <div class="location-to"></div> 
 
    </div> 
 

 

 
    <div class="additional_seats_wrapper editable-field"> 
 
    <strong>Additional Seats: </strong><span id="additional-seats" class="text-muted"></span> 
 
    <!-- overlay-icon --> 
 
    <div class="overlay-icon"> 
 
     <a class="btn-icon back_first" href="javascript:void(0);"><i class="fa fa-edit"></i></a> 
 
    </div> 
 
    <!-- /overlay-icon --> 
 
    </div> 
 
</div>

Answer 1

你可以嘗試以下方法：

var $distance = $('.trip-summary-info .distance'); 
if ($distance.text() === ""){ 
    // There is no text, so handle that 
} 
else { 
    // There is text, so you could do something different 
} 

Answer 2

你缺少.代表類find()

if ($('.trip-summary-info').find('.distance').length > 0) { 
 
console.log($('.trip-summary-info').find('.distance').text()) 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="trip-summary-info"> 
 
    <h3> 
 
    <a href="javascript:void(0);" class="back_first"> 
 
     <span class="chevron-up"><i class="fa fa-chevron-up"></i></span> Booking Summary: &nbsp; 
 
     <span class="date-time"></span>07-07-2017 09:05<span class="distance">, 99.84 kilometers</span><span class="duration">, 1 hrs 13 mins</span> 
 
    </a> 
 
    <span class="custom-btn custom-btn-default edit back_first"><a href="javascript:void(0);"><i class="fa fa-pencil"></i></a></span> 
 
    </h3> 
 
    <div class="trip_status custom-clearfix"> 
 
    <span class="location-form-marker"><i class="fa fa-map-marker"></i></span> 
 
    <div class="location-form"></div> 
 
    <div class="list-address-point" style="display:unset;"></div> 
 
    <span class="location-to-marker"><i class="fa fa-map-marker"></i></span> 
 
    <div class="location-to"></div> 
 
    </div> 
 

 

 
    <div class="additional_seats_wrapper editable-field"> 
 
    <strong>Additional Seats: </strong><span id="additional-seats" class="text-muted"></span> 
 
    <!-- overlay-icon --> 
 
    <div class="overlay-icon"> 
 
     <a class="btn-icon back_first" href="javascript:void(0);"><i class="fa fa-edit"></i></a> 
 
    </div> 
 
    <!-- /overlay-icon --> 
 
    </div> 
 
</div>

Answer 3

您需要在distance之前添加.才能找到課程。

<div class="trip-summary-info"> 
 
\t \t  <h3> 
 
\t \t \t <a href="javascript:void(0);" class="back_first"> 
 
\t \t \t  <span class="chevron-up"><i class="fa fa-chevron-up"></i></span> 
 
\t \t \t  Booking Summary: 
 
\t \t \t  &nbsp;<span class="date-time"></span>07-07-2017 09:05<span class="distance">, 99.84 kilometers</span><span class="duration">, 1 hrs 13 mins</span> 
 
\t \t \t </a> 
 
\t \t \t <span class="custom-btn custom-btn-default edit back_first"><a href="javascript:void(0);"><i class="fa fa-pencil"></i></a></span> 
 
\t \t  </h3> 
 
\t \t  <div class="trip_status custom-clearfix"> 
 
\t \t \t  <span class="location-form-marker"><i class="fa fa-map-marker"></i></span><div class="location-form"></div> 
 
\t \t \t  <div class="list-address-point" style="display:unset;"></div> 
 
\t \t \t  <span class="location-to-marker"><i class="fa fa-map-marker"></i></span><div class="location-to"></div> 
 
\t \t  </div> 
 
\t \t  
 
\t \t \t 
 
\t \t  <div class="additional_seats_wrapper editable-field"> 
 
\t \t \t <strong>Additional Seats: </strong><span id="additional-seats" class="text-muted"></span> 
 
\t \t \t <!-- overlay-icon --> 
 
\t \t \t <div class="overlay-icon"> 
 
\t \t \t \t <a class="btn-icon back_first" href="javascript:void(0);"><i class="fa fa-edit"></i></a> 
 
\t \t \t </div> 
 
\t \t \t <!-- /overlay-icon --> 
 
\t \t  </div> 
 
\t \t </div> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script> 
 

 
if($('.trip-summary-info').find('.distance').length > 0){ 
 
\t \t \t \t alert("Working !!!"); 
 
} 
 
</script>

Answer 4

您可以通過這個訪問它（ '距離'）

if($(".trip-summary-info").find('h3').find('.distance').length > 0){ 
    alert('working!!'). 
}