Iterating through elements within a Div will retrieve the initial element exclusively

Question

Iterating through elements within a Div will retrieve the initial element exclusively

Is there a way to loop through all elements within the MainDiv Div in order to retrieve their values? Currently, I am only able to retrieve the value of the first element.

<div id="MainDiv">
    <input type="text" id="MyText"value="Text1" />
    <input type="text" id="MyText1" value="Text2" />

    <textarea id="Textarea1">A</textarea>
    <textarea id="Textarea2">B</textarea>
</div>


  $('#MainDiv').each(function () {

            var Value1 = $(this).find("input[type = 'text'][id^='MyText']").val();
            alert(Value1);

            var Value2 = $(this).find("[id^='Textarea']").val();
            alert(Value2);

        })

javascript jquery html css

Answer 1

Answer №1

When you have a single #MainDiv in your HTML, using .each() will loop through it just once.

To iterate through all child elements of #MainDiv with an id that contains the text "Text," you can utilize the attribute contains selector with "Text" as the value.

$("#MainDiv [id*=Text]").each(function() {
  console.log(this.value) // perform actions here
})

Answer 2

When you have a single #MainDiv in your HTML, using .each() will loop through it just once.

To iterate through all child elements of #MainDiv with an id that contains the text "Text," you can utilize the attribute contains selector with "Text" as the value.

$("#MainDiv [id*=Text]").each(function() {
  console.log(this.value) // perform actions here
})

Answer 3

Answer №2

Check out this example on how to select input, textarea, and select elements within a specific division.

If you assign a name attribute and want to access it as an array, it's recommended to use:

$('#MainDiv').find('input, select, textarea').serializeArray();

$('#MainDiv').find('input, select, textarea').each(function(){  
  console.log(this.id +'=>'+$(this).val());
});

// Consider assigning a name attribute
console.log( $('#MainDiv').find('input, select, textarea').serializeArray() );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="MainDiv">
    <input type="text" id="MyText" value="Text1" />
    <input type="text" id="MyText1" value="Text2" />

    <textarea id="Textarea1">A</textarea>
    <textarea id="Textarea2">B</textarea>

    <!-- Assigning a name attribute can be useful -->
    <input type="text" id="t1" name="for_serialize" value="test me"/>
    <input type="text" id="t2" name="for_serialize2" value="test me2"/>
</div>

Answer 4

Check out this example on how to select input, textarea, and select elements within a specific division.

If you assign a name attribute and want to access it as an array, it's recommended to use:

$('#MainDiv').find('input, select, textarea').serializeArray();

$('#MainDiv').find('input, select, textarea').each(function(){  
  console.log(this.id +'=>'+$(this).val());
});

// Consider assigning a name attribute
console.log( $('#MainDiv').find('input, select, textarea').serializeArray() );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="MainDiv">
    <input type="text" id="MyText" value="Text1" />
    <input type="text" id="MyText1" value="Text2" />

    <textarea id="Textarea1">A</textarea>
    <textarea id="Textarea2">B</textarea>

    <!-- Assigning a name attribute can be useful -->
    <input type="text" id="t1" name="for_serialize" value="test me"/>
    <input type="text" id="t2" name="for_serialize2" value="test me2"/>
</div>

Answer 5

Answer №3

To retrieve the value of each field when using JQuery as a plugin, simply adjust the code below as shown in NKHIL CM's example:

$('#MainDiv').find("*").each(function (key, elem) {
  console.log(elem.value);
})

Answer 6

To retrieve the value of each field when using JQuery as a plugin, simply adjust the code below as shown in NKHIL CM's example:

$('#MainDiv').find("*").each(function (key, elem) {
  console.log(elem.value);
})

Answer 7

Answer №4

To loop through all the elements within a div, you can utilize the "*" selector along with the find method in JQuery.

  $('#MainDiv').find("*").each(function (elem) {
          console.log(elem)
        })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div id="MainDiv">
    <input type="text" id="MyText"value="Text1" />
    <input type="text" id="MyText1" value="Text2" />

    <textarea id="Textarea1">A</textarea>
    <textarea id="Textarea2">B</textarea>
</div>

Answer 8

To loop through all the elements within a div, you can utilize the "*" selector along with the find method in JQuery.

  $('#MainDiv').find("*").each(function (elem) {
          console.log(elem)
        })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div id="MainDiv">
    <input type="text" id="MyText"value="Text1" />
    <input type="text" id="MyText1" value="Text2" />

    <textarea id="Textarea1">A</textarea>
    <textarea id="Textarea2">B</textarea>
</div>

Iterating through elements within a Div will retrieve the initial element exclusively

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

The Outcome of Ajax Form Submission

Guide to creating an HTML table with bokeh

The driver instance that has forked will never cease

The face textures are not being applied correctly to the model imported in THREE.js

I am encountering an issue where body-parser is not functioning properly with typescript. Whenever I make a request, the request.body is returning as undefined

Using prerender.io in conjunction with native Node.js

Global setting of font size ratio in Material UI library

Rails: How come my personalized stylesheet isn't taking priority over the font family?

Guide on how to retrieve a response from an API Route and integrate it into the client side of the app router within Next.js

Is it possible to align items in flexbox to a specific baseline?

Managing additional components in request JSON when communicating with DialogFlow, previously known as Api.ai

Transferring information from a service to an AngularJS controller

Enhance the appearance of TreeGrid nodes by customizing the icons according to the data within

Performing real-time arithmetic calculations on dynamic text input fields using AngularJS

How do I use props to enable and conceal elements like lists, buttons, and images?

Expanding Module Scope to Just the Request (employing Require, Node.js)

In Backbone.js, specialized events are dispatched to cater to unique needs

Displaying Multiple HighCharts on a single AngularJS page

Utilizing a form on numerous occasions prior to its submission

Using PHP to convert JSON data into the Google Chart API