將一個jquery函數應用於多個選擇器？

Question

我有一個相當複雜的dom樹，有各種例外等。所以我不想使用

我想做的功能，如「爲每個錯誤消息，我想添加一個類到以前的輸入」。

現在我正在做樹遍歷，但由於各種原因，這不是一個好的解決方案。有沒有一種直接針對正確輸入值的好方法？我完全控制了html，所以如果需要的話，我可以添加類和類似的東西！

實際HTML：

<label for="from">Från</label> 
    <input value="as" title="Ort, gata eller kommun" name="from" id="from" class="field from input_error" type="text"> 
    <div class="spacer"> 
     <div class="error visible"> 
      <p>Vilken adress menar du? Välj i listan!</p> 
      <ul> 
       <li> 
        <a href="addtrip?from=American%20Samoa&amp;to=&amp;when=&amp;got_car=1&amp;name=&amp;email=&amp;phone=&amp;details=&amp;posted" class="adress">American Samoa</a> 
        </li> 
       <li> 
        <a href="addtrip?from=Assam,%20India&amp;to=&amp;when=&amp;got_car=1&amp;name=&amp;email=&amp;phone=&amp;details=&amp;posted" class="adress">Assam, India</a> 
        </li> 
       <li> 
        <a href="addtrip?from=Elias,%20El%20Gaiara,%20Azbakia,%20Cairo,%20Egypt&amp;to=&amp;when=&amp;got_car=1&amp;name=&amp;email=&amp;phone=&amp;details=&amp;posted" class="adress">Elias, El Gaiara, Azbakia, Cairo, Egypt</a> 
        </li> 
       <li> 
        <a href="addtrip?from=Amberg,%2092224,%20Germany&amp;to=&amp;when=&amp;got_car=1&amp;name=&amp;email=&amp;phone=&amp;details=&amp;posted" class="adress">Amberg, 92224, Germany</a> 
        </li> 
       <li> 
        <a href="addtrip?from=As%20-%20Bras%C3%ADlia,%20Brasilia%20-%20Distrito%20Federal,%20Brazil&amp;to=&amp;when=&amp;got_car=1&amp;name=&amp;email=&amp;phone=&amp;details=&amp;posted" class="adress">As - Brasília, Brasilia - Distrito Federal, Brazil</a> 
        </li> 
       <li> 
        <a href="addtrip?from=As,%205753%20Deurne,%20The%20Netherlands&amp;to=&amp;when=&amp;got_car=1&amp;name=&amp;email=&amp;phone=&amp;details=&amp;posted" class="adress">As, 5753 Deurne, The Netherlands</a> 
        </li> 
       </ul> 
      </div> 
     </div> 
    <label for="to">Till</label> 
    <input value="" title="Ort, gata eller kommun" name="to" id="to" class="field to help input_error" type="text"> 
    <div class="spacer"> 
     <div class="error"> 
      <p>Var ska du?</p> 
      </div> 
     </div> 
    <label for="when">När</label> 
    <div class="jdpicker_w"> 
     <input value="" title="YYYY-MM-DD" name="when" id="when" class="field when input_error" type="text"> 
     <div class="date_selector"> 
      <div class="nav"> 
       <div class="error_msg"></div> 
       <p class="month_nav"> 
        <span class="button prev" title="[Page-Up]">«</span> 
        <span class="month_name">November</span> 
        <span class="button next" title="[Page-Down]">»</span> 
        </p> 
       <p class="year_nav"> 
        <span class="button prev" title="[Ctrl+Page-Up]">«</span> 
        <span class="year_name" id="year_name">2010</span> 
        <span class="button next" title="[Ctrl+Page-Down]">»</span> 
        </p> 
       </div> 
      </div> 
     </div> 
    <div class="spacer"> 
     <div class="error"> 
      <p>När vill du åka?</p> 


</div> 

Answer 1

你可以添加你需要的類上一個輸入的每一個錯誤信息如下：

$('.error').each(function(index){ 
    $(this).closest('div.spacer').prev('input').addClass('desired-class-'+index); 
}); 

在前面的方案

，每個輸入字段將有一個獨特的類名，
萬一你希望他們都擁有相同的類名，只需刪除+索引

Answer 2

我將包裹每個輸入 「組」 中的容器具有相同的類中，例如這樣的：

<label for="to">Till</label> 
<input value="" title="Ort, gata eller kommun" name="to" id="to" class="field to help input_error" type="text"> 
<div class="spacer"> 
    <div class="error"> 
     <p>Var ska du?</p> 
    </div> 
</div> 

變爲：

<div class="container"> 
    <label for="to">Till</label> 
    <input value="" title="Ort, gata eller kommun" name="to" id="to" class="field to help input_error" type="text"> 
    <div class="spacer"> 
    <div class="error"> 
     <p>Var ska du?</p> 
    </div> 
    </div> 
</div> 

...和每一套都一樣。現在，每個.container是處理單元，和你的腳本只是變成：

$(".error").closest(".container").find("input").addClass("someClass"); 

這使用.closest()起牀到新的容器中，然後使用.find()進去的<input> ......這與.error去我們開始。

，或者使用:has()發現貨櫃內<input>元素也包含.error元素：

$(".container:has(.error) input").addClass("someClass"); 

我看到你有一個visible類的錯誤上面，如果你只希望這適用於那些，將上述任一方法中的.error選擇器更改爲.error.visible。