How can I check if a child element is not hidden while the parent is?

2023-03-01 16:00 问答作者：

I have the following code that controls radio button options shown one level at at time. It starts at Level 0 and after the user selects an option it determines what options are visible on the next level and shows only those options.

My issue is that for some selected options there may be no options available on the next level. Thus, I want to skip that level and check next etc.. I am able to check if there are hidden and not hidden elements but having the parent level hidden causes all child elemens come up hidden.

Is there some other way to check?

In my code you can see this line:

$('*[id^="op' + $(this).val() + '"]').show();

This line sets the options under a hidden parent to visible (BTW, I know they won't show until the parent is shown.) After this I then check to see if there are options available (i.e. not hidden) in the next level (which happens to still be hidden).

I don't want to show the level div until I know there are options available.

Here is sample HTML:

<div class="level" id="level0">
                    <div class="option" id="op0-1">
<input id="0-1" name="optionids[1]" type="radio" value="1" />option</div>
                    <div class="option" id="op0-2">
<input id="0-2" name="optionids[1]" type="radio" value="2" />option</div>
</div> 

<div class="level" id="level1">
                    <div class="option" id="op1-3">
<input id="1-3" name="optionids[1]" type="radio" value="3" />option</div>
                    <div class="option" id="op1-4">
<input id="1-4" name="optionids[1]" type="radio" value="4" />option</div>
                    <div class="option" id="op1-5">
<input id="1-5" name="optionids[1]" type="radio" value="5" />option</div>
                    <div class="option" id="op2-6">
<input id="2-6" name="optionids[1]" type="radio" value="6" />option</div>
                    <div class="option" id="op2-7">
<input id="2-7" name="optionids[1]" type="radio" value="7" />option</div>
</div>

<div class="level" id="level2">
                    <div class="option" id="op3-8">
<input id="3-8" name="optionids[1]" type="radio" value="8" />option</div>
                    <div class="option" id="op3-9">
<input id="3-9" name="optionids[1]" type="radio" value="9" />opt开发者_如何转开发ion</div>
                    <div class="option" id="op4-10">
<input id="4-10" name="optionids[1]" type="radio" value="10" />option</div>
                    <div class="option" id="op4-11">
<input id="4-11" name="optionids[1]" type="radio" value="11" />option</div>
                    <div class="option" id="op4-12">
<input id="4-12" name="optionids[1]" type="radio" value="12" />option</div>
</div>

I have only shown three level but that should suffice. In this scenario all options in level0 have options in level1 but only options (op1-3, op1-4) have options in level2.

BTW, the IDs are comprised of the option value and option parent. i.e. option op1-3 is the value from option op0-1 and op1-3's actual value.

Here is the Jquery that controls the viewing of options.

$(function () {

    $(":submit, :reset").button({ disabled: true });
    $(".option").not($('*[id^="op0-"]')).hide(); //hide all options but those on level 1 (index 0)
    $(".level").not("#level0").hide(); //hides all levels but level 1

    //When user selects an option on visible level show next level and options for selected option
    $("input").click(function () {

        //enable reset button once user starts selection
        if ($("#option:checked")) {
            $("#reset").button({ disabled: false });
        }

        //create variable for easy access to elements
        var parentContainer = $(this).parent();
        var currentLevel = $(this).parent().parent();
        var nextLevel = $(currentLevel).next();

        //disable other options in current level after selection. This will only show selected options at each level
        $(parentContainer).siblings('*[id^="op"]').hide();

        //Set visibility of options related to selected option to on.
        $('*[id^="op' + $(this).val() + '"]').show(); //shows options

        //check if there are options visible for next level. If not move to next level and check. i.e skip any levels which don't have options.
        while (CheckForOptions(nextLevel) == false) {
            nextLevel = nextLevel.next();
        }

        alert("Level after check completed: " + nextLevel.attr("Id") + " This one should become visible");
        //shows the level that now has options for selected option
        $(nextLevel).show();

        //if we are at last level, enable submit button.
        if ($(currentLevel).attr("id") == $("#lastlevel").val()) {
            $(":submit").button({ disabled: false });
        }

    });

    function CheckForOptions(nextLevel) {

        alert("Level coming in: " + nextLevel.attr("Id"));

        if ($(nextLevel).children().not(":hidden").size() > 0) {
            alert("Has some not hidden");
            alert("Number of elements not hidden: " + $(nextLevel).children().not(":hidden").size());
            return true;
        }
        else {
            alert("all are hidden");
            alert("Number of hidden: " + $(nextLevel).children().filter(":hidden").size());
            return false;
        }
    };

Ok, so though one of the methods to identify child elements pertaining to a particular parent was already in plain sight, it wasn't the best method to use. Below is what I implemented.

function CheckForOptions(nextLevel, val) {

        var result = false;

        $(nextLevel).children().each(function () {
            //check if we find options which are visible in next level. 
            if ($(this).css("display") === "block") {
                result = true; //some visible
            }
        });

        return result;

    };

I previously set all my options to have a display equal to "block". This was to ensure the when Jquery .show() method is applied it goes back to "block". I am then checking if any of the level's children have an actual value of "block". If some are found I show that level else I move to the next level.