Jquery selection of multiple input without using ids

Question

I have a piece of code like this:

<div class="container">

    <div class="row">
        <div class="col">
            <input class="form-control" type="text" id="#first">
        </div>
        <div class="col">
            <input class="form-control" type="text" id="#second">
        </div>
        <div class="col">
            <input class="form-control" type="text" id="#third">

        </div>
    </div>


</div>

If I want to get each input's text i could simply use jquery id selection ($('first).text()) Since I know there are tons of way to select dom elements, is there a nice way to select each one of them not using the id selector?

Try $("input[type=text]"), also it should be id="first" and not id="#first". Also it should be $('f#irst).text() and not $('first).text() — Carsten Løvbo Andersen
– Carsten Løvbo Andersen, Commented Mar 2, 2018 at 13:52

G43beli · Accepted Answer · 2018-03-02 14:45:02Z

Use $("input[type=text]") Carsten suggested in the comments. (also watch his hints according your syntax)

If you want to work with those elements (for example validating) you can use the .each() function in jquery and work with $(this):

$("input[type=text]").each(function( index ) {
  var test = $(this).val();
});

Here some other possibilities to select those inputs:

class

give them all the same class and make the selector like this $(".yourClass")

parent

give the container of all those inputs that you want to select a specific class $(".yourContainerClass input") or more precise $(".yourContainerClass input[type=text]")

attributes

like type you have access to every attribut of the input field like this: $("[attribute='value']") this could be name value or watherver you like

here you have an overview of the attribute selectors according to w3schools:

[attribute] - ex. $("[href]") - All elements with a href attribute
[attribute!=value] - ex. $("[href!='default.htm']") - All elements with a href attribute value not equal to "default.htm"
[attribute$=value] - ex. $("[href$='.jpg']") - All elements with a href attribute value ending with ".jpg"
[attribute|=value] - ex- $("[title|='Tomorrow']") - All elements with a title attribute value equal to 'Tomorrow', or starting with 'Tomorrow' followed by a hyphen
[attribute^=value] - ex. $("[title^='Tom']") - All elements with a title attribute value starting with "Tom"
[attribute~=value] - ex. $("[title~='hello']") - All elements with a title attribute value containing the specific word "hello"
[attribute*=value] - ex. $("[title*='hello']") - All elements with a title attribute value containing the word "hello"

Collectives™ on Stack Overflow

Jquery selection of multiple input without using ids

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related