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

AngularJs monitoring changes in service

Easy steps to transform a basic table into a DataTables plugin

Tracking the email field in a React form with refs

AngularJS directive for attributes. Steps for adding a second attribute directive during compilation phase

Can someone help me figure out this lengthy React error coming from Material UI?

Is it advisable to incorporate vue-resource in Vuex actions?

I am attempting to make the fade in and out effect function properly in my slideshow

VueJS with Vuetify: Issue with draggable cards in a responsive grid

Complete a submission using an anchor (<a>) tag containing a specified value in ASP.Net MVC by utilizing Html.BeginForm

What could be causing the undefined status of my checkUser() function?

Set the size of the website to remain constant

Issue with vertical cell alignment in MUI x-data-grid persists following the latest update to version 7.2.0

AngularJS: Identifying the position (ON/OFF) of ui-switch

Using jQuery to scroll a div element

My attempts to utilize the local storage key have been unsuccessful in storing my todo list. I am uncertain where the issue lies within my code

Error: EsLint detected that the classname is not a valid Tailwind CSS class

Using both text and image sprites in a horizontal menu list on a UL element

Unable to properly utilize environment variables on Vercel when using Nuxt framework

Feeling puzzled about the next() function in Node.js?

Unable to retrieve information from compact JSON files