获取具有特定 id 的最接近的前一个元素

Question

我有由 symphony 创建的动态页面，客户端我正在尝试获取具有通配符 (id^='route_segments_) 的特定 id 的触发元素之前的 最近的元素。不幸的是，JQuery 没有找到任何东西。

脚本应返回以下项目。

  <div class="col-sm-10">
<input type="text" id="route_segments_1_destCountry" name="route[segments][1][destCountry]" required="required" class="form-control" value="GB">

$("input:radio").on('change', function() {
  var date = moment($(this).parent().text(), "HH:mm DD MMM YYYY");

  alert($(this).parent().prevAll("input[id^='route_segments_']").first());

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
  <label class="col-sm-2 control-label required" for="route_segments_1_details">Details</label>
  <div class="col-sm-10">
    <textarea id="route_segments_1_details" name="route[segments][1][details]" required="required" class="form-control"></textarea>
  </div>
</div>

<div class="form-group">
  <label class="col-sm-2 control-label required" for="route_segments_1_vehicle">Vehicle</label>
  <div class="col-sm-10">
    <input type="text" id="route_segments_1_vehicle" name="route[segments][1][vehicle]" required="required" class="form-control" value="Bus">
  </div>
</div>
<div class="form-group">
  <label class="col-sm-2 control-label required" for="route_segments_1_vehicleKind">Vehicle kind</label>
  <div class="col-sm-10">
    <input type="text" id="route_segments_1_vehicleKind" name="route[segments][1][vehicleKind]" required="required" class="form-control">
  </div>
</div>
<div class="form-group">
  <label class="col-sm-2 control-label required" for="route_segments_1_originCountry">Origin country</label>
  <div class="col-sm-10">
    <input type="text" id="route_segments_1_originCountry" name="route[segments][1][originCountry]" required="required" class="form-control" value="GB">
  </div>
</div>
<div class="form-group">
  <label class="col-sm-2 control-label required" for="route_segments_1_destCountry">Dest country</label>
  <div class="col-sm-10">
    <input type="text" id="route_segments_1_destCountry" name="route[segments][1][destCountry]" required="required" class="form-control" value="GB">
  </div>
</div>

<button type="button" style="cursor: pointer" class="showHidden btn btn-default">Change Places</button>
</div>
<div class="col-sm-6" style="height: 100%">
  <strong>Transit Duration: </strong>0h 21m
  <br>
  <strong>Transfer Duration: </strong>0h 4m
</div>
</div>
</div>
<div style="overflow:auto;height: 250px;border: 1px solid #686868;border-radius: 5px;width:80%;margin: auto;margin-top:20px;margin-bottom: 20px">



  <div style="margin: auto;width: 90%">
to;width: 90%">
                <div class="form-group"><div class="col-sm-2"></div><div class="col-sm-10"><div class="radio"><label class="required"><input type="radio" id="route_flight_0" name="route[flight]" required="required" value="0"> Dubai 00:30 26 Oct 2016 Dublin 14:55 26 Oct 2016
                Duration: 17h 25m  Stops: 3  Price: 393.5 EUR</label></div></div></div>
                </div>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            <div style="margin: auto;width: 90%">
                <div class="form-group"><div class="col-sm-2"></div><div class="col-sm-10"><div class="radio"><label class="required"><input type="radio" id="route_flight_1" name="route[flight]" required="required" value="1"> Dubai 00:30 26 Oct 2016 Dublin 09:10 26 Oct 2016
                Duration: 11h 40m  Stops: 2  Price: 402.27 EUR</label></div></div></div>
                </div>
                                 
    <div class="form-group">
      <div class="col-sm-2"></div>
      <div class="col-sm-10">
        <div class="radio">
          <label class="required">
            <input type="radio" id="route_flight_0" name="route[flight]" required="required" value="0">Dubai 00:30 26 Oct 2016 Dublin 14:55 26 Oct 2016 Duration: 17h 25m Stops: 3 Price: 393.5 EUR</label>
        </div>
      </div>
    </div>
  </div>

Answer 1

你会遇到这个 HTML 结构的问题，因为在 DOM 中 <input type="radio"> 和你试图定位的元素之间没有明确的关系。

具体来说，jQuery 的.prevAll 只查看您开始的元素的前一个兄弟：在这种情况下，<label class="required"> 是单选按钮的父元素。该标签没有兄弟，因此prevAll 不返回任何内容。

有几种方法可以定义无线电和可能目标之间的关系。一种方法是将单选按钮和目标都包装在一个已知容器中，然后在容器内部查找最后一个匹配项：

HTML：

<ul class="routes">
  <li class="route">
     <input type="text" class="route-segment" value="route1"/>
  </li>
  <li class="route">
     <input type="text" class="route-segment" value="route2"/>
  </li>
  <li class="route">
     <input type="text" class="route-segment" value="route3"/>
  </li>
    <li class="route">
     <input type="text" class="route-segment" value="route4"/>
  </li>
</ul>

<ul class="transfers">
  <li class="transfer">
    <input type="radio" name="transfer-select" value="transfer-1">
  </li>
  <li class="transfer">
    <input type="radio" name="transfer-select" value="transfer-2">
  </li>
</ul>

JS：

$(function(){
    // Cache the elements that we're going to need:
  var routes = $('.routes .route'),
      transfers = $('.transfers .transfer');

    // Whenever the selected transfer is changed, find the last route:
  transfers.on('change', 'input:radio', function(){
    var route = routes.last();
    //Find the input inside the last route:
    console.log(route.find('input.route-segment').val());
    //Find the input inside the second-to-last route:
    console.log(route.prev().find('input.route-segment').val());
  });
});