adds css class to designate level in hierarcy select

this code is supposed to help me target menus, but I don't understand how it works and what it means by first? they are all first .. and where are the second and third ..

/** adds css class to designate level in hierarcy fselect **/
add_action( 'wp_footer', function() {
    ?>
    <script>
        (function($) {
            $(document).on('facetwp-loaded', function() {
                $.each( $( ".fs-option" ), function() {
                    var label = $(this).children(".fs-option-label").first().html();
                    if ( -1 !== label.indexOf("&nbsp;&nbsp;&nbsp;&nbsp;") ) {
                        $(this).addClass( 'third' );
                    } else if ( -1 !== label.indexOf("&nbsp;&nbsp;") ) {
                        $(this).addClass( 'second' );
                    } else {
                        $(this).addClass( 'first' );
                    }
                } )
            });
        })(jQuery);
    </script>
    <?php
}, 100 );

enter image description here

after I'm supposed to do that right?

.fs-option second:before{
    content: "—";
}
.fs-option third:before{
    content: "——";
}

no luck it doesn't work like that..

maybe i misunderstood what he's supposed to do?

here is the image of what I want to do

on the ← right what I have

on the left → what I want to do

enter image description here

Update : the whole html text

<div class="facetwp-facet facetwp-facet-type facetwp-type-fselect" data-name="type" data-type="fselect">
    <div class="fs-wrap fs-default" tabindex="0">
        <div class="fs-label-wrap">
            <div class="fs-label">Any Type</div>
            <span class="fs-arrow"></span>
        </div>
        <div class="fs-dropdown hidden">
            <div class="fs-search"><input type="text" placeholder="Search" /></div>
            <div class="fs-no-results hidden">No results found</div>
            <div class="fs-options">
                <div class="fs-option selected g0" data-value="" data-index="0">
                    <span class="fs-checkbox"><i></i></span>
                    <div class="fs-option-label">Any Type</div>
                </div>
                <div class="fs-option g0 d0" data-value="residential" data-index="1">
                    <span class="fs-checkbox"><i></i></span>
                    <div class="fs-option-label">Residential</div>
                </div>
                <div class="fs-option g0 d1" data-value="apartment" data-index="2">
                    <span class="fs-checkbox"><i></i></span>
                    <div class="fs-option-label">Apartment</div>
                </div>
                <div class="fs-option g0 d1" data-value="mainsion" data-index="3">
                    <span class="fs-checkbox"><i></i></span>
                    <div class="fs-option-label">Mansion</div>
                </div>
                <div class="fs-option g0 d1" data-value="villa" data-index="4">
                    <span class="fs-checkbox"><i></i></span>
                    <div class="fs-option-label">Villa</div>
                </div>
                <div class="fs-option g0 d0" data-value="commercial" data-index="5">
                    <span class="fs-checkbox"><i></i></span>
                    <div class="fs-option-label">Commercial</div>
                </div>
                <div class="fs-option g0 d1" data-value="office" data-index="6">
                    <span class="fs-checkbox"><i></i></span>
                    <div class="fs-option-label">Office</div>
                </div>
                <div class="fs-option g0 d1" data-value="shop" data-index="7">
                    <span class="fs-checkbox"><i></i></span>
                    <div class="fs-option-label">Shop</div>
                </div>
            </div>
        </div>
        <select class="facetwp-dropdown hidden ready">
            <option value="">Any Type</option>
            <option value="residential" class="d0">Residential</option>
            <option value="apartment" class="d1">Apartment</option>
            <option value="mainsion" class="d1">Mansion</option>
            <option value="villa" class="d1">Villa</option>
            <option value="commercial" class="d0">Commercial</option>
            <option value="office" class="d1">Office</option>
            <option value="shop" class="d1">Shop</option>
        </select>
    </div>
</div>

EDIT :

this bit of code makes no sense or I'm the one who is too tired to understand. with this css I can add images and target my value

div[data-value="facet-value"] .fs-option-label {
    background: url(http://example.com/content/uploads/2018/02/some-image.jpg) 0 0 no-repeat;
    background-size: contain;
    padding-left: 20px;
}

but imagine you want to do it with only parents or childs it's a nightmare you have to do it manually?

in the meantime, here is a last test look at the logic

  (function($) {
            $(document).on('facetwp-loaded', function() {
                $.each( $( ".fs-option" ), function() {
                    var label = $(this).children(".fs-option-label").first().html();
                    if ( 2 !== label.indexOf("&nbsp;&nbsp;&nbsp;&nbsp;") ) {
                        $(this).addClass( 'third' );
                    } else if ( 1 !== label.indexOf("&nbsp;&nbsp;") ) {
                        $(this).addClass( 'second' );
                    } else {
                        $(this).addClass( 'first' );
                    }
                } )
            });
        })(jQuery);

they are all third now...

<div class="fs-options">
    <div class="fs-option selected g0 third" data-value="" data-index="0"><span class="fs-checkbox"><i></i></span>
        <div class="fs-option-label">Any Type</div>
    </div>
    <div class="fs-option g0 d0 third" data-value="residential" data-index="1"><span class="fs-checkbox"><i></i></span>
        <div class="fs-option-label">Residential</div>
    </div>
    <div class="fs-option g0 d1 third" data-value="apartment" data-index="2"><span class="fs-checkbox"><i></i></span>
        <div class="fs-option-label">Apartment</div>
    </div>
    <div class="fs-option g0 d1 third" data-value="mainsion" data-index="3"><span class="fs-checkbox"><i></i></span>
        <div class="fs-option-label">Mansion</div>
    </div>
    <div class="fs-option g0 d1 third" data-value="villa" data-index="4"><span class="fs-checkbox"><i></i></span>
        <div class="fs-option-label">Villa</div>
    </div>
    <div class="fs-option g0 d0 third" data-value="commercial" data-index="5"><span class="fs-checkbox"><i></i></span>
        <div class="fs-option-label">Commercial</div>
    </div>
    <div class="fs-option g0 d1 third" data-value="office" data-index="6"><span class="fs-checkbox"><i></i></span>
        <div class="fs-option-label">Office</div>
    </div>
    <div class="fs-option g0 d1 third" data-value="shop" data-index="7"><span class="fs-checkbox"><i></i></span>
        <div class="fs-option-label">Shop</div>
    </div>
</div>

EDIT

thank you swati for your patience and help I tried to follow your code and my own logic of things now it must be something like this but surprise .. it doesn't really work like that too. strange

 (function($) {
        $(document).on('facetwp-loaded', function() {
            $.each( $( ".fs-option" ), function() {
                if $(".fs-option.d0"){$(this).addClass('first');}
                if $(".fs-option.d1"){$(this).addClass('second');}
                if $(".fs-option.d2"){$(this).addClass('third');}
                else {$(this).addClass( 'first' );}
        });
    })(jQuery);

do we have to switch to CSS brute force mode? it's very annoying it limits my flexibility to customize my menus

EDIT

brute force CSS mode worked for me, I found freedom and flexibility at last i dont know who wrote this devil code to try i dont know what use .. if you have any explanation ..

enter image description here

/* Get this parent An (★)*/
.fs-open .g0.d0 div:before{
    content:"★";
    padding-right:2px;
}

/* Get this child An Em Dash (—)*/
.fs-open .g0.d1 div:before{
    content:"—";
    padding-right:2px;
}

/* Global align */
.fs-open .g0 div{
padding-left:10px!important;
}

Again thank you swati I mark your answer as valid because you made an effort to help me

评论