獲取最接近的具有特定ID的元素

我有交響樂創建的動態頁面，客戶端我試圖通過帶有通配符（id^='route_segments_）的特定ID觸發元素之前的最接近的元素。不幸的是JQuery沒有找到任何東西。獲取最接近的具有特定ID的元素

該腳本應返回以下項目。

<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>

來源

2016-10-26 user2147674

'get the most previous element' that that first first element in DOM has'id^='？如果我理解你'$（「input [id^='route_segments _']」）。first（）;' –

我表達了它的錯誤，我的意思是事件激發單選按鈕的最接近的元素。 – user2147674

你將會遇到這個HTML結構的問題，因爲''和你試圖定位的元素之間的DOM沒有明確的關係。具體來說，jQuery的'.prevAll'只會查看你以前的元素的_siblings_：在這種情況下，''是你單選按鈕的父元素。這個標籤沒有兄弟姐妹，所以'prevAll'什麼都不返回。 – Beejamin

你要與這個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()); 
    }); 
});

來源

2016-10-26 10:48:30 Beejamin

我創建了一個JSFiddle https：// jsfiddle。net/mvue4k43 /＃＆togetherjs = plfgMt2O9N 我想獲得「第二部分」 – user2147674

獲取最接近的具有特定ID的元素

回答

相關問題