Manipulate the contents of children divs within a parent div using JavaScript or JQuery

Question

Manipulate the contents of children divs within a parent div using JavaScript or JQuery

<div id="abc">
    <div id="a_b"> abcd </div>
    <div id="c_d"> xyz </div>
</div>

I have a challenge where the divs on my page are generated dynamically and their IDs change every time the page loads. When the window is loaded, I need to pass the content of a_b and c_d to a function func(), and then display the output within the same div. How can I access each child of div abc and update their content accordingly?

javascript jquery html css

Answer 1

Answer №1

For the solution you are looking for, consider using .text() in combination with .each().

$(window).load(function(){
  $("#abc > div").each(function() {
     $(this).text(someFunction($(this).text()));
  });
});

Alternatively, a more efficient approach would be to utilize the callback function of .text(),

$(window).load(function(){
  $("#abc > div").text(function(_,v) {
    return someFunc(v);
  });
});

Answer 2

For the solution you are looking for, consider using .text() in combination with .each().

$(window).load(function(){
  $("#abc > div").each(function() {
     $(this).text(someFunction($(this).text()));
  });
});

Alternatively, a more efficient approach would be to utilize the callback function of .text(),

$(window).load(function(){
  $("#abc > div").text(function(_,v) {
    return someFunc(v);
  });
});

Answer 3

Answer №2

To easily access the #abc div at all times, you can target it first and then iterate over any direct child div elements using the text() method along with a handler function. Here's an example:

$('#abc > div').text(function(i, v) {
    return v + ' foobar';
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="abc">
  <div id="a_b">abcd</div>
  <div id="c_d">xyz</div>
</div>

If you prefer, you can compile an array of the content within the child divs and then pass that to a custom function like func():

var textContents = $('#abc > div').map(function() {
    return $(this).text();
}).get();

func(textContents);

function func(arrText) {
    console.log(arrText); // = [ 'abcd', 'xyz' ]
}

Answer 4

To easily access the #abc div at all times, you can target it first and then iterate over any direct child div elements using the text() method along with a handler function. Here's an example:

$('#abc > div').text(function(i, v) {
    return v + ' foobar';
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="abc">
  <div id="a_b">abcd</div>
  <div id="c_d">xyz</div>
</div>

If you prefer, you can compile an array of the content within the child divs and then pass that to a custom function like func():

var textContents = $('#abc > div').map(function() {
    return $(this).text();
}).get();

func(textContents);

function func(arrText) {
    console.log(arrText); // = [ 'abcd', 'xyz' ]
}

Manipulate the contents of children divs within a parent div using JavaScript or JQuery

Answer №1

Answer №2

Similar questions

Using regular expressions to validate input in Javascript

Using JSP and Jquery for uploading files

Issues with the functionality of the map method in Javascript arrays

Validating Captcha with jQuery and AJAX for Securimage

Is it possible to include three sorting states in jQuery DataTables: ASC, DESC, and NO_SORT?

How can I add a hyperlink to a Javascript string array?

Adding several <div> elements with the correct indices

The identification of the field is not being transmitted by ng-select

What is the functionality of the protection against AngularJS JSON vulnerability?

The CSS file that is defined first in the node.js HTML is the only one being utilized

Issue with JQuery mobile: dynamically inserted popup fails to appear

Changes on services do not affect the Angular component

Exploring the Touch Feature in Angular

jQuery does not have the capability to automatically calculate Value Added Tax on form submissions

The periodLookup array does not have a defined value for periodStr. Why is this error being caught?

What could be causing the unexpected behavior of req.query in NEXT.js?

Removing a cookie in Javascript - step by step guide

Updating the input value of one field by typing into another field is not functioning properly when trying to do so for

Nodejs restricts the user from performing the action

Is it possible to retrieve information from a MySQL database by utilizing Bootstrap and Ajax with the selected ID?