Question

How would I write both of these without using .each() and only using JQuery Selectors?

var xxxx = 0;
$('.clonedInput').each(function(index) {
    if($(this).children().filter(':checked').length == 2)
    xxxx++;
});


var num_normal_foods = 0;
$('[id^="amount_"]').each(function(index) {
    if($(this).val() == '30.00')
    num_normal_foods++;
});

Answer 1

Lets take this one step at a time.

You started with:

var xxxx = 0;
$('.clonedInput').each(function(index) {
    if($(this).children().filter(':checked').length == 2)
    xxxx++;
});

To me this looks like you’re simply trying to filter a collection of .clonedInput elements and find out how many match the filter:

var xxxx;
function hasTwoCheckedChildren(i) {
    return $(this).children(':checked').length == 2;
}
xxxx = $('.clonedInput').filter(hasTwoCheckedChildren).length;

Followed by:

var num_normal_foods = 0;
$('[id^="amount_"]').each(function(index) {
    if($(this).val() == '30.00')
    num_normal_foods++;
});

Again, this looks like a filtering function to me:

var num_normal_foods;
function valueIsThirty(i) {
    return +$(this).val() === 30;
}
num_normal_foods = $('[id^="amount_"]').filter(valueIsThirty).length;

---

In the end, what matters is that the code does what you intend it to do. If the code you wrote with .each does what you want it to, then there’s no need to change it. Behind-the-scenes filter uses each anyway.