Use jquery 'find()' to find more than 1 element within div

[multichild]

The code below can be any number, at the moment this is replicated 16 times, and inside each of the divs there a checkbox and 2 drop-downs. I have had a go at this with Paul but I have changed it and simplifying, so this is part 2, so a new thread.

<div class="card" id="modulesWrapper">

@for (int i = 0; i < Model.PropertyModuleModels.Count; i++)
 {
<div class="moduleElement" data-module-id="68">
<input class="moduleEnabledCheckbox check-box" id="PropertyModuleModels_[i]__IsActive">

<select class="moduleFrequencyDropdown" id="PropertyModuleModels_[i]__FrequencyId">
<option value=""></option>
<option value="1">Monthly</option>
<option value="2">Every 2 Months</option>
<option value="3">Quarterly</option>
<option value="4">Twice a Year</option>
<option value="5">Annually</option>
</select>

<select class="moduleStartMonthDropdown" id="PropertyModuleModels_[i]__StartMonthId">
<option value=""></option>
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
</div>
}
</div>

I then have the following jquery find() to check if any of the checkboxes have been selected and this works fine, it runs through all the divs looking to see if there at least one.

var greenTickModule = $("#modulesWrapper").find('.moduleElement input[type=checkbox]:checked');

This works well, and when there is at least 1 I show a tick as below,and its always being checked as a called function when someone closes up a card.

    if (greenTickModule.length > 0) {
        $("#modulesWrapper").find('.greenTick').show();
    } else {
        $("#modulesWrapper").find('.greenTick').hide();
    }

All good so far, but what I now need to do is change the find so it also incorportaes the 2 dropdowns and see if they have a value greater than zero, as in something positive has been selected in both dropdowns.

So can I use the find below, to check each .moduleElement within #modulesWrapper and see if there exists a checkbox that has been checked and both drop-downs have a value greater than zero. My thinking is that I extend the find after the input :checked, but I’m predicting this isn’t going to be possible.

var greenTickModule = $("#modulesWrapper").find('.moduleElement input[type=checkbox]:checked');

    if (greenTickModule.length > 0) {
        $("#modulesWrapper").find('.greenTick').show();
    } else {
        $("#modulesWrapper").find('.greenTick').hide();
    }

Just throwing it out there, but is something like this possible

var greenTickModule = $("#modulesWrapper").find('.moduleElement input[type=checkbox]:checked' && '.moduleElement .moduleFrequencyDropdown > option[value!=""]' && '.moduleElement .moduleStartMonthDropdown > option[value!=""]');

[m_hutley]

@multichild

dropdowns and see if they have a value greater than zero

CSS will define that with select:not([value=“”]).

and you want to find two (or three in a chain), immediately adjacent siblings that match that criteria. CSS defines ‘immediately adjacent sibling’ as + , such as a + b { background-color: red; }

[multichild]

hi m_hutley,

Do you mean like this:

var greenTickModule = $("#modulesWrapper").find('.moduleElement input[type=checkbox]:checked' + '.moduleElement .moduleFrequencyDropdown > select:not([value=""])' + '.moduleElement .moduleStartMonthDropdown > select:not([value=""])');

No errors, but not working.

[m_hutley]

Not quite.

First of all, I mean putting + in the selector.

Second of all, it’s a single chain of thought. Try putting your search into english.

Inside any moduleElement:
Where the Checkbox is checked.
And the Dropdown directly next to it has a value that is not ""
And the dropdown directly next to that has a value that is not "".

and then you start writing by transforming your words.

$("#modulesWrapper").find('
.moduleElement
input[type=checkbox]:checked
+ select:not([value=""])
+ select:not([value=""])
')

[multichild]

Ok I got you, yes that makes sense thank you.

I tried both of these with no result, but I can see that Im not far off

var greenTickModule = $("#modulesWrapper").find('.moduleElement input[type=checkbox]:checked + .moduleFrequencyDropdown > select:not([value=""]) + .moduleStartMonthDropdown > select:not([value=""])');

var greenTickModule = $("#modulesWrapper").find('.moduleElement input[type=checkbox]:checked + select:not([value=""]) + select:not([value=""])');

[m_hutley]

That… would be because i’m a derp and am used to working in a proactive environment that sets the value of select elements rather than passively letting them evaluate at commit time.
sigh

Vanilla CSS is going to struggle with this because the value of the select is not reevaluated on change, and you can’t “go back up” the CSS tree; so it requires a bit more finesse.

let greenTickModule = $("#modulesWrapper").find('.moduleElement input[type=checkbox]:checked').filter(function() { 
  return $(this).siblings('select').filter(function() { 
    return $(this).val() != "" 
  }).length == 2; 
});

There’s probably a cleaner way of doing that, but my brain ran off in a bit of a tangent solving the problem.

[multichild]

ye that is very different isnt it, but again its not happening, im trying to break it to find out what it needs.

[m_hutley]

Your checkbox isnt a checkbox.
<input class="moduleEnabledCheckbox check-box" id="PropertyModuleModels_[i]__IsActive">

It works for me when i add the correct type to your input field:

[multichild]

I got it in the end, i had to change my pathways up and down the DOM to get to the ‘selects’, as below, but works perfectly thank you

    var greenTickModule = $("#modulesWrapper").find('.moduleElement input[type=checkbox]:checked').filter(function () {
        return $(this).closest('.moduleElement').find('select').filter(function () {
            return $(this).val() !== "";
        }).length === 2;
    });