I am working with a list that includes parent and children items.
Title1
child1
child2
child3
Title2
child1
child2
child3
My goal is to display the parent and children in the following format:
title1_child1
title1_child2
title1_child3
title2_child1
title2_child2
title3_child2
Any assistance would be greatly appreciated.
If you have the following structure in place, give this solution a try:
<ul>
<li><span>Title1</span>
<ul>
<li>Child1</li>
<li>Child2</li>
<li>Child3</li>
</ul>
</li>
<li><span>Title1</span>
<ul>
<li>Child1</li>
<li>Child2</li>
<li>Child3</li>
</ul>
</li>
</ul>
<div class="output"></div>
$(function(){
var parent, str = "", $this;
$("ul:first li").each(function(){
$this = $(this);
parent = $this.find("span").text();
str = "";
$this.find("li").each(function(){
str = str + parent + "_" + $(this).text() + "<br />";
});
$(".output").html(str);
});
});
let combinedStrings="";
$(".title childTag").each(function(){
combinedStrings += $(this).closest(".title").html() + "_" + $(this).html();
})
This is just an example
Just starting out with google closure... are there any templates provided by Google for creating a basic user registration/login page? Most of what I've found so far seems to focus on UI manipulation and DOM creation. ...
I am facing an issue with my chart.js code where I am trying to remove both the axis lines from the graph but still display the grids (NOTE) ` const MAINCHARTCANVAS = document.querySelector(".main-chart") new Chart(MAINCHARTCANVAS, { type: 'line&apo ...
The goal is to display the <div class="resp"> below each radio button when it is selected, with different content in each <div class="resp">. The previously selected <div class="resp"> should be hidden when a new radio button is chosen. O ...
After spending the entire day attempting to troubleshoot my code, I am still unable to figure out why it's not functioning properly. I have several jQuery functions, but when I try to combine them, one of them fails to work. Here is the current state ...
Essentially, when the function is executed on my page, an image is called to div#imagebox. However, at times the image can be large and may take some time to load, particularly if it hasn't been cached yet. I want to provide the user with a notificati ...
I am facing an issue with screen resizing. The code below appears fine on a full screen, but as soon as I resize the window even a tiny bit, it starts to look distorted and unattractive. I have gone through the Bootstrap 4 grid layout tutorial, but it is n ...
Within my code, there is a profile image tag along with an input tag for updating the image. I aim to implement a functionality that allows me to select a new image and automatically update the profile picture when it changes <div class="col-sm-6"> ...
Can JavaScript or JQuery be used to list all the @font-face URLs (web font URLs) on a specific HTML page? ...
I am trying to update a variable's value when the scroll position exceeds 100 from the top, but for some reason it is not working as expected. The value of the variable does not change in $scope. Here is the code snippet: <div ng-show="title===tr ...
I have two sets of dates (selected via inputs/selects in the format mm/dd/yyyy) on my page. I want a specific readonly text field to display the age in months, calculated based on those two dates, after a different select field (not part of the date set) ...
My window size isn't working properly, despite attempting the following code: Javascript var game; function game() { this.canvas = document.getElementById('canvas'); this.canvasWidth = window.innerWidth; this.canvasHeight = wi ...
<form> <input type="submit" name="submit" id="formSubmit" value="SAVE FOR NOW" /> <input type="submit" name="submitAndConfirm" id="submitAndConfirm" value="CONFIRM AND UPLOAD TO SERVER" /> </f ...
I am currently facing the challenge of detecting the existence of a form field in a closed popup window. Unfortunately, I do not have control over the child window, but it is within the same domain as the parent window. I have explored the possibility of ...
I need a button that can reset all filter dropdown values to their default values. The current code I have only changes all values to "Filter" when reset, but I specifically need it to reset to "Car brand" and "Model". Here's my code: // set.... $(" ...
My current project involves creating an interactive collage where users can click around and have pictures pop up at the clicked location. The functionality works as intended, but now I'm facing issues with the navigation bar not being clickable. Addi ...
I am encountering difficulties attempting to replicate a full-width rectangle div on a website, particularly with issues related to responsiveness and mobility. Here is an example of the design I am trying to recreate. And here's what I've acco ...
I am in the process of creating a set of radio buttons that will be utilized for capturing values to generate a subscription/modal checkout. My current situation involves having the radio button options visible. However, I aim to achieve a functionality wh ...
I am working with a JSF form on a view *.jspx page that contains approximately 20 fields. The form includes a print preview button that opens a new browser window and displays the form in read-only mode. To achieve this, I have utilized a workaround invol ...
My goal is to center a form within a div and have another div on the right that is slightly indented, but I'm struggling to align the elements properly. How can I achieve this layout using CSS? Additionally, is there a way to center the right-hand d ...
Within the following code snippet, there seems to be an issue with accessing the dataString variable in the comment.php page. To retrieve the variable name, I utilized $_POST['name']. $(document).ready(function(){ $("#submit").click( function() ...