添加 css class 以指定层次结构中的级别 select

Question

这段代码应该可以帮助我定位菜单，但我不明白它是如何工作的，首先是什么意思？他们都是第一..第二和第三在哪里..

/** 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 );

在我应该这样做之后对吗？

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

不走运，它不是那样工作的..

也许我误解了他应该做什么？

这是我想做的事情的形象

在←右边我有

左边→我想做的

更新：整个html文本

<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>

编辑：

这段代码毫无意义，或者我太累了看不懂。有了这个 css 我可以添加图片并定位我的价值

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;
}

但是想象一下你只想用 parents 或孩子来做这件事你必须手动做是一场噩梦吗？

与此同时，这是逻辑的最后一个测试

  (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);

他们现在都是第三...

<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>

编辑

谢谢你的耐心和帮助我试着遵循你的代码和我自己的逻辑，现在它一定是这样的但令人惊讶的是……它也不是那样工作的。奇怪

 (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);

我们必须切换到 CSS 暴力破解模式吗？这很烦人，它限制了我自定义菜单的灵活性

编辑

蛮力 CSS 模式对我有用，我终于找到了自由和灵活性我不知道是谁写了这个恶魔代码来尝试我不知道有什么用..如果你有任何解释..

/* 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;
}

再次感谢您，我将您的回答标记为有效，因为您努力帮助了我

Answer 1

如果 d1 class 是 child 那么您可以简单地使用 $(".fs-option.d1") 定位所有 d1 div 并向它们添加 class addClass("child") 无需使用每个循环。

演示代码 :

//get fs-option.d1 add class there
$(".fs-option.d1").addClass("child")

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="fs-dropdown hidden">
  <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>

添加 css class 以指定层次结构中的级别 select

adds css class to designate level in hierarcy select

jquery

html-select

fselect