[英]Get closest previous element with specific id
我有交響樂創建的動態頁面,客戶端我試圖在具有特定ID和通配符(id ^ ='route_segments_) 的射擊元素之前獲取最近的元素 。 不幸的是,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>
您將在這種HTML結構上遇到問題,因為<input type="radio">
與您要定位的元素之間在DOM中沒有明確的關系。
具體來說,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());
});
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.