如何检查特定的SPAN类内容文本

时间:2017-07-05 10:00:42

标签: javascript jquery

想检查一个特定的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>

4 个答案:

答案 0 :(得分:0)

您遗漏.代表find()

中的班级

&#13;
&#13;
if ($('.trip-summary-info').find('.distance').length > 0) {
console.log($('.trip-summary-info').find('.distance').text())
  }
&#13;
<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>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

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

&#13;
&#13;
<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>

<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){
				alert("Working !!!");
}
</script>
&#13;
&#13;
&#13;

答案 2 :(得分:0)

您可以尝试以下方法:

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
}

答案 3 :(得分:0)

您可以通过以下方式访问它:

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