<div class="contain_questions">
<div class="question">
<div class="question_text">First question</div>
<div class="question_mandatory">1</div>
<div class="options">
<div class="option"><div class="option_name">a</div><div class="option_value">1</div></div>
<div class="option"><div class="option_name">b</div><div class="option_value">2</div></div>
<div class="option"><div class="option_name">c</div><div class="option_value">3</div></div>
</div>
add_another_option
</div>
.
. // many more div.question ...
.
<input type="button" value="submit_questions" />
</div>
How do you use .each() for each div.option within an outer .each() for each question?
I have the outer .each() working fine, which iterates over all div.question and pushes the question_text etc into an array, however I cant seem to target the options container within each question in order to also push all of the options for each question into the array.
Also, is it possible to target a subset of the DOM with the .each() function, or is there some other way to iterate over all classes within a given class?
Thanks guys..
Just as simple as that:
$(".question").each(function() {
...
$(this).find(".option").each(function() {
...
});
});
So your code might look like the following:
var questions = [];
$(".question").each(function() {
var obj = {
name : $(this).find(".question_text").text(),
options : []
};
$(this).find(".option").each(function() {
obj.options.push({
name : $(this).find(".option_name").text(),
value : $(this).find(".option_value").text()
});
});
questions.push(obj);
});
console.log(questions);
Related
This question already has answers here:
Easiest way to sort DOM nodes?
(9 answers)
Closed last month.
I have list and this list must be sort to a => b throught like btn (example click SORT and we have list to a -> b)
<div class = "list">
<div id = "products"> Sugar </div>
<div id = "products"> Banana </div>
<div id = "products"> Apple </div>
</div>
sorted to for button =>
<div class = "list">
<div id = "products"> Apple </div>
<div id = "products"> Banana </div>
<div id = "products"> Sugar </div>
</div>
Idk how did that with like btn :(
I tried something like that =>
// For the HTML //
<button class = 'sortBtn' onclick = 'sort()'>Sort</button>
<script>
const sort = document.quertSelector('.sortBtn');
sort.addEventListenet('click', function sort(a, b){
$parent.sort();
})
</script>
I would be grateful for help :) <3
There's a few issues in your code.
Typo: quertSelector -> querySelector
Typo: addEventListenet -> addEventListener
The repeated id in your HTML are invalid, convert them to class instead.
The function you provide to addEventListener should be anonymous in this case. Giving it a name here serves no purpose other than to waste bytes.
Avoid using inline event handlers, such as onclick, in your HTML code. It's outdated and no longer good practice. Use unobtrusive event handlers instead, such as addEventListener(), which you already use elsewhere in your code.
sort() should compare the a and b arguments and return an integer depending on which way to sort them. In this case, as you're comparing strings you can use localeCompare() on the textContent property of the elements.
After the sort() has completed you need to update the DOM to respect the new order of the elements. To do this you can call append() on the parent element, supplying the children as the argument.
Here's a working example with these issues addressed:
const sortButton = document.querySelector('.sortBtn');
const list = document.querySelector('.list');
const products = list.querySelectorAll('.products');
sortButton.addEventListener('click', () => {
const sortedElements = Array.from(products).sort((a, b) => a.textContent.localeCompare(b.textContent));
list.append(...sortedElements);
})
<div class="list">
<div class="products">Sugar</div>
<div class="products">Banana</div>
<div class="products">Apple</div>
</div>
<button type="button" class="sortBtn">Sort</button>
Convert the children of the parent element to an array. Then you can use the array sort() method to sort it, then append the children back to the parent in that order.
document.querySelector(".sortBtn").addEventListener("click", () => sortDiv(document.querySelector(".list")));
function sortDiv(parent) {
let children = [...parent.children];
children.sort((a, b) => a.innerText.localeCompare(b.innerText));
parent.innerHTML = '';
children.forEach(child => parent.appendChild(child));
}
<div class="list">
<div class="products"> Sugar </div>
<div class="products"> Banana </div>
<div class="products"> Apple </div>
</div>
<button class='sortBtn'>Sort</button>
I am looping through elements using jQuery like this:
$(".myelement").each(function() {
$element = $(this).closest(".panel").attr("id");
console.log($element);
});
This is working correctly and I am seeing each of the elements it finds in my console log. I am now trying to get a string containing each element that looks like this:
#element1, #element2, #element3
What is the easiest way to do this? Does anybody have an example they can point me at?
You could use map() to build an array of the id then join() it, something like this:
var ids = $(".myelement").map(function() {
return '#' + $(this).closest(".panel").prop("id");
}).get().join(', ');
console.log(ids);
You could use an array to store them by adding the # in every iteration, then after the loop end join them using join() method like :
var ids = [];
$(".myelement").each(function() {
ids.push('#' + $(this).closest(".panel").attr("id"));
});
console.log(ids.join(', '));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="element1" class="panel">
<span class="myelement">My element 1</span>
</div>
<div id="element2" class="panel">
<span class="myelement">My element 2</span>
</div>
<div id="element3" class="panel">
<span class="myelement">My element 3</span>
</div>
Try with map()
The .map() method is particularly useful for getting or setting the value of a collection of elements.
As the return value is a jQuery object, which contains an array, it's very common to call .get() on the result to work with a basic array.
You can use map(), get() and join()
in the following way:
var $element = $(".myelement").map(function(){
return $(this).closest(".panel").attr("id");
}).get().join(', ');
console.log($element);
I'm trying to loop through different divs. I've got product arrays, but they are displayed in different div's. Is there a way to loop through them? I would like to put the available products (array.length) in an Array. The code is as followed:
<div id=Googletagsholderdiv data-gtm-ecommerce.purchase.actionField.id="x"
data-gtm-ecommerce.purchase.actionField.affiliation="x"
data-gtm-ecommerce.purchase.actionField.revenue="x"
data-gtm-ecommerce.purchase.actionField.tax="x"
data-gtm-ecommerce.purchase.actionField.shipping="x"
data-gtm-ecommerce.purchase.actionField.coupon="x">
<div data-gtm-ecommerce.purchase.products[0].name="x"
data-gtm-ecommerce.purchase.products[0].id="x"
data-gtm-ecommerce.purchase.products[0].price="x"
data-gtm-ecommerce.purchase.products[0].brand="x"
data-gtm-ecommerce.purchase.products[0].category="x"
data-gtm-ecommerce.purchase.products[0].variant="x"
data-gtm-ecommerce.purchase.products[0].quantity="x"
data-gtm-ecommerce.purchase.products[0].coupon="x"
data-gtm-ecommerce.purchase.products[0].dimensionX="x">
</div>
<div data-gtm-ecommerce.purchase.products[1].name="x"
data-gtm-ecommerce.purchase.products[1].id="x"
data-gtm-ecommerce.purchase.products[1].price="x"
data-gtm-ecommerce.purchase.products[1].brand="x"
data-gtm-ecommerce.purchase.products[1].category="x"
data-gtm-ecommerce.purchase.products[1].variant="x"
data-gtm-ecommerce.purchase.products[1].quantity="x"
data-gtm-ecommerce.purchase.products[1].coupon="x"
data-gtm-ecommerce.purchase.products[1].dimensionX="x">
</div>
<div data-gtm-ecommerce.purchase.products[2].name=""
data-gtm-ecommerce.purchase.products[2].id="x"
data-gtm-ecommerce.purchase.products[2].price="x"
data-gtm-ecommerce.purchase.products[2].brand="x"
data-gtm-ecommerce.purchase.products[2].category=""
data-gtm-ecommerce.purchase.products[2].variant="x"
data-gtm-ecommerce.purchase.products[2].quantity="x"
data-gtm-ecommerce.purchase.products[2].coupon="x"
data-gtm-ecommerce.purchase.products[2].dimensionX="x">
</div>
</div>
I think you should had a class to all your div with your desired data, and after, get all of them with jQuery.
You can select the parent element with any selector you like and get it's children with the children array.
Yoi can loop through this array using the for..of loop:
var Googletagsholderdiv = document.getElementById("Googletagsholderdiv");
for (var div of Googletagsholderdiv.children) {
console.log(div);
}
<div id=Googletagsholderdiv data-gtm-ecommerce.purchase.actionField.id="x" data-gtm-ecommerce.purchase.actionField.affiliation="x" data-gtm-ecommerce.purchase.actionField.revenue="x" data-gtm-ecommerce.purchase.actionField.tax="x" data-gtm-ecommerce.purchase.actionField.shipping="x"
data-gtm-ecommerce.purchase.actionField.coupon="x">
<div data-gtm-ecommerce.purchase.products[0].name="x" data-gtm-ecommerce.purchase.products[0].id="x" data-gtm-ecommerce.purchase.products[0].price="x" data-gtm-ecommerce.purchase.products[0].brand="x" data-gtm-ecommerce.purchase.products[0].category="x"
data-gtm-ecommerce.purchase.products[0].variant="x" data-gtm-ecommerce.purchase.products[0].quantity="x" data-gtm-ecommerce.purchase.products[0].coupon="x" data-gtm-ecommerce.purchase.products[0].dimensionX="x"></div>
<div data-gtm-ecommerce.purchase.products[1].name="x" data-gtm-ecommerce.purchase.products[1].id="x" data-gtm-ecommerce.purchase.products[1].price="x" data-gtm-ecommerce.purchase.products[1].brand="x" data-gtm-ecommerce.purchase.products[1].category="x"
data-gtm-ecommerce.purchase.products[1].variant="x" data-gtm-ecommerce.purchase.products[1].quantity="x" data-gtm-ecommerce.purchase.products[1].coupon="x" data-gtm-ecommerce.purchase.products[1].dimensionX="x"></div>
<div data-gtm-ecommerce.purchase.products[2].name="" data-gtm-ecommerce.purchase.products[2].id="x" data-gtm-ecommerce.purchase.products[2].price="x" data-gtm-ecommerce.purchase.products[2].brand="x" data-gtm-ecommerce.purchase.products[2].category=""
data-gtm-ecommerce.purchase.products[2].variant="x" data-gtm-ecommerce.purchase.products[2].quantity="x" data-gtm-ecommerce.purchase.products[2].coupon="x" data-gtm-ecommerce.purchase.products[2].dimensionX="x"></div>
I have an array of sections where a section is pushed into the array when the user clicks a checkbox. It is defined like this:
$scope.print = {
sections:[]
};
Once I have all of the selected Sections, I use a service to get a list of questions for each selected section like this:
var questions = [];
myService.getQuestions(id)
.success(function (data) {
questions = data;
});
Then I assign the returned questions to the original array like this:
angular.forEach($scope.print.sections,
function (value, key) {
if (value.QuestionSectionID === id) {
$scope.print.sections[key].questions = questions;
}
});
The assignment "seems" to work, but I am unable to access the particular fields in the questions array by their field names.
On my HTML page, I have this:
<div ng-repeat="ps in print.sections">
<div>
<h4>{{ps.vchSectionName}}</h4>
</div>
<div ng-repeat="section in ps.questions">
<div ng-repeat="q in section">
{{q.vchQuestionText}}
</div>
</div>
</div>
When I try to access the "q.vchQuestionText" field, my HTML is blank, however if I simple do the following:
<div ng-repeat="q in section">
{{q}}
</div>
I can then see ALL of the information contained in each field of "q". But I need to access each field in "q" by it's name. What am I missing here?
Any assistance is greatly appreciated!
Okay, the reason I could display all the data in "q", but could not specify a field is because I had one too many ng-repeat directives.
All I needed was the following:
<div ng-repeat="ps in print.sections">
<div>
<h4>{{ps.vchSectionName}}</h4>
</div>
<div ng-repeat="q in ps.questions">
{{q.vchQuestionText}}
</div>
</div>
Hopefully, this will help someone else. Thank you all for your help.
Let's suppose, I have this code:
<div>
<div>
<span class="toarray" name="someName-1">someDynamicValue</span>
</div>
<div>
<span class="toarray" name="someName-2">someDynamicValue</span>
</div>
<div>
<span class="toarray" name="someName-3">someDynamicValue</span>
</div>
</div>
I want to create JSON array from this code:
{
someName-1: "someDynamicValue",
someName-2: "someDynamicValue",
someName-3: "someDynamicValue"
}
You can try something like bellow
var data = {};
$('span.toarray').each(function(){
data[$(this).attr('name')] = $(this).text();
});
console.log(data);
Demo
Do this.
Get all the spans with class toarray, loop over them, get each spans text along with attr('name') and push into an object defined above the loop.