Foreach miscellaneous elements and selectors using Jquery

jQuery's $.each() function is a powerful tool for iterating over collections of elements. While often used with simple selectors, its versatility extends to handling a variety of element types and even custom selectors. This article explores how to leverage $.each() with miscellaneous elements and selectors, providing practical examples and best practices to enhance your jQuery skills.

Foreach elements with certain class

$('.autocomplete-field-value').each(function(index, value) {
    console.log('#' + index + ': ' + value);
});	

Foreach form inputs

$('form#formID').find('input').each(function(value) {
   console.log(value);
});

Foreach form elements with ceration name

$("form#formID").find('input[name="products[]"').each(function(value) {
   console.log(value);
});

Foreach select options

$("#items option").each(function(el) {
    console.log(el.val());
});

Loop JSON data with $.each

result = JSON.parse(string_with_json_array);
$.each(result, function(index, value) {
    console.log('#' + index + ': ' + value);
});

Loop for each data-attribute on an element

$("input[data-category]").each(function(el) {
    console.log(el.val());
});

Loop for each element with certain data attribute value

$("input[data-category="category_1"]").each(function(el) {
    console.log(el.val());
});

Loop JSON data with pure JS

for(var key in json) {
   console.log(key, json[key]);
}

In conclusion, jQuery's $.each() function offers a robust and adaptable method for iterating over a wide range of elements and data structures.

As demonstrated in this article, its utility extends far beyond basic selectors, allowing you to efficiently process diverse element types, form inputs, select options, JSON data, and elements with specific data attributes.

Whether you're working with classes, IDs, names, or custom data attributes, $.each() provides a consistent and powerful way to loop and manipulate your chosen elements. By mastering these techniques, you can write cleaner, more efficient, and more maintainable jQuery code, ultimately enhancing your web development workflow.

While pure JavaScript loops offer similar functionality for JSON data, $.each() often provides a more concise and jQuery-integrated approach, especially when combined with other jQuery methods.

Remember to choose the approach that best suits your specific needs and coding style. With practice, you'll be able to leverage the full potential of $.each() to tackle complex DOM manipulation and data processing tasks with ease.