使用jQuery，我需要確定一個字段

最後一個可見的輸入我有一個codepen顯示我的問題：http://codepen.io/esdictor/pen/KdqeEV 使用jQuery，我需要確定一個字段

結構：我有一個包含字段集的形式。每個字段集都包含FormRows（div class =「FormRow」）。每個FormRow包含字段（div class =「FormField」）。每個字段通常包含一個表單元素（input，select，textarea等，但在這個例子中，我將堅持輸入）。所以：

<form> 
    <fieldset> 
     <legend>Group 1</legend> 
     <div class="FormRow"> 
      <div class="FormField"> 
       <label for="Test1">Test1</label> 
       <input type="text" id="Test1" /> 
      </div> 
      <div class="FormField"> 
       <label for="Test2">Test2</label> 
       <input type="text" id="Test2" /> 
      </div> 
     </div> 
    </fieldset> 
</form>>

要求：我的頁面需要到最後輸入反應在每個字段集，除了最後的字段集。我想出了一個選擇，在第一次工作得很好：

$('form fieldset:not(:last-of-type) .FormRow:last-of-type .FormField:last-of-type input')

的問題：最近我考慮到可能會基於表格的其他數據被隱藏了一些新的元素，在這些人的情況下在fieldset結尾並且WERE隱藏時，我的代碼不再有效。

我的示例：上面鏈接的codepen在組2字段集中隱藏了TextA輸入（實際上整個FormRow是隱藏的）。因爲這是隱藏的，Test9輸入應該是紅色的。但是，我一直無法拿出一個選擇器來考慮這一點。

注意這個表格是數據驅動的，用於許多不同類型的數據，所以我不能硬編碼任何東西。當控件是字段集中的最後一個可見控件時，我需要「知道」，以便我可以相應地編寫我的事件。

一如既往，在此先感謝！

來源

2015-10-15 ESDictor

的問題是，當你選擇最後FormField（或事件最後FormRow）它不能有任何可見的輸入。

你可以這樣做：

$('form fieldset:not(:last-of-type) .FormRow:last-of-type:has(input:visible) .FormField:last-of-type:has(input:visible) input:visible')

或避免非常複雜的選擇：

$('form fieldset:not(:last-of-type)').each(function() { 
    var $fieldset = $(this), 
     $input = $fieldset.find("input:visible:last"); 
    if ($input.length > 0) 
     // Do your work here 
     $input.css("background-color", "red"); 
});

基於評論你也可以使用：

$('form fieldset:not(:last-of-type) .FormRow:last-of-type .FormField:last-of-type input, form fieldset:not(:last-of-type) input:visible:last')

來源

2015-10-15 18:09:04 Diego

無論你選擇器給了我答案，但其中一個確實突出了Test9的正確性（CodePen是dow此刻我不記得哪一個）。我覺得這讓我更接近正確的答案。 – ESDictor

嘗試這個新代碼 – Diego

我尋找選擇器的原因是我需要這個事件，而不是顏色變化。我現在可以使用代碼的唯一方法就是如果我最初設置一個新類（如.IsLastInput），然後將其用於我的事件。 – ESDictor

您可以嘗試使用「：可見」選擇器。

$('form fieldset:not(:last-of-type) .FormRow:last-of-type .FormField:last-of-type input:visible')

或者如果其FormField被隱藏這樣的：

$('form fieldset:not(:last-of-type) .FormRow:last-of-type .FormField:last-of-type:visible input')

來源

2015-10-15 18:07:17 AtheistP3ace

使用jQuery，我需要確定一個字段

回答

相關問題