CODEWITHSUNDEEP
javascriptjquery
Himmators
Himmators

Reputation: 15006

apply one jquery function to multiple selectors?

I have a pretty complex dom-tree with various exceptions etc. So I don't want to use

I wanna do functions like "for every error message I wanna add a class to the previous input".

Right now I'm doing it with tree traversal, but for various reasons it's not a good solution. Is there a good way to directly target the correct input value? I have full control over the html, so I can add classes and such to them if needed!

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

Upvotes: 2

Views: 1836

Answers (2)

Anas Nakawa
Anas Nakawa

Reputation: 2015

you can add your desired class to the previous input for every error message as follows:

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

in the previous scenario, each of your input fields will have a unique class name,
in case you want them all to have the same class name, just remove the +index

Upvotes: 1

Nick Craver
Nick Craver

Reputation: 630379

I would wrap every input "set" in a container with the same class, for example this:

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

becomes:

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

...and the same for every other set. Now each .container is a unit to deal with, and your script just becomes:

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

This uses .closest() to get up to the new container, then uses .find() to get the <input> inside...that goes with the .error we started with.

Or, alternatively using :has() to find <input> elements inside containers that also contain .error elements:

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

I see you have a visible class on the errors above, if you only want this to apply to those, change the .error selector in either of the above methods to .error.visible.

Upvotes: 0

Related Questions