1

Есть связаныне списки, которые я хочу перенести в итоговый проект на сайт на движке wordpress. На тестовом работает хорошо, а вот в рабочем запись с :nth-child(2) - li.sf-field-taxonomy-ad_cat:nth-child(2) select не воспринимает. Если еще для parent обхожусь так

var parent = document.getElementsByClassName("sf-field-taxonomy-ad_cat")[0].getElementsByClassName("sf-input-select")[0]

то как быть с $children = $('li:nth-child(2) select'); ?

Код

jQuery.noConflict();
(function($) {
  $(window).load(function() {
    var parent = 'li:nth-child(1) select',
      $children = $('li:nth-child(2) select');

    $(document).on('change', parent, function() {
      var $this = $(this),
        value = $this.val(),
        start = $children.find('option[value="' + value + '"]').index(),
        $childrens = $children.find('option').slice(start + 1);

      $children.find('option').hide();

      $childrens.each(function() {
        if ($(this).is('.sf-level-0')) {
          return false;
        }

        $(this).show();
      });
    });

    $(parent).trigger('change');
  });
})(jQuery);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="sf-field-taxonomy-ad_cat" data-sf-field-name="_sft_ad_cat" data-sf-field-type="taxonomy" data-sf-field-input-type="select" data-sf-combobox="1" data-sf-term-rewrite="[&quot;http:\/\/site.com\/ad-category\/[0]\/&quot;]">
    <label>
  <select data-combobox="1" name="_sft_ad_cat[]" class="sf-input-select" title="">
    <option class="sf-level-0 sf-item-0" data-sf-count="0" data-sf-depth="0" value="">марка а/м</option>
    <option class="sf-level-0 sf-item-32" data-sf-count="1" data-sf-depth="0" value="alfa-romeo">Alfa Romeo</option>
    <option class="sf-level-0 sf-item-19 sf-option-active" selected="selected" data-sf-count="12" data-sf-depth="0" value="audi">Audi</option>		
  </select>
</label>
  </li>

  <li class="sf-field-taxonomy-ad_cat" data-sf-field-name="_sft_ad_cat" data-sf-field-type="taxonomy" data-sf-field-input-type="select" data-sf-combobox="1" data-sf-term-rewrite="[&quot;http:\/\/site.com\/ad-category\/[0]\/&quot;]">
    <label>
  <select data-combobox="1" name="_sft_ad_cat[]" class="sf-input-select" title="">
    <option class="sf-level-0 sf-item-0 sf-option-active" selected="selected" data-sf-count="0" data-sf-depth="0" value="">марка а/м</option>
    <option class="sf-level-0 sf-item-32" data-sf-count="1" data-sf-depth="0" value="alfa-romeo">Alfa Romeo</option>
    <option class="sf-level-1 sf-item-59" data-sf-count="1" data-sf-depth="1" value="156">&nbsp;&nbsp;&nbsp;156</option>
    <option class="sf-level-0 sf-item-19" data-sf-count="10" data-sf-depth="0" value="audi">Audi</option>
    <option class="sf-level-1 sf-item-60" data-sf-count="1" data-sf-depth="1" value="a6c5">&nbsp;&nbsp;&nbsp;A6C5</option>
    <option class="sf-level-1 sf-item-61" data-sf-count="1" data-sf-depth="1" value="a4">&nbsp;&nbsp;&nbsp;A4</option>
    <option class="sf-level-1 sf-item-62" data-sf-count="1" data-sf-depth="1" value="a6">&nbsp;&nbsp;&nbsp;A6</option>
  </select>
</label>
  </li>
</ul>

2
  • "В тестовом работает" - сверьте версии jQuery. В общем, нужно искать разницу в окружении.
    – vp_arth
    18 янв 2018 в 8:39
  • @vp_arth вот такой подход срабатывает var parent = document.getElementsByClassName("sf-field-taxonomy-ad_cat")[0].getElementsByClassName("sf-input-select")[0] задача переписать детей что-то наподобие такого, но это вызывает ошибку ($ = функция) $children = $('document.getElementsByClassName("sf-field-taxonomy-ad_cat")[0].getElementsByClassName("sf-input-select")[0]')
    – Вася
    18 янв 2018 в 8:54

1 ответ 1

1

Есть решение. Вместо :nth-child поставил select:first и select:last и заработало! Кто подскажет почему - получит плюсик в карму

jQuery.noConflict();
(function($) {
  $(window).load(function() {
    var parent = 'li select:first',
      $children = $('li select:last');

    $(document).on('change', parent, function() {
      var $this = $(this),
        value = $this.val(),
        start = $children.find('option[value="' + value + '"]').index(),
        $childrens = $children.find('option').slice(start + 1);

      $children.find('option').hide();

      $childrens.each(function() {
        if ($(this).is('.sf-level-0')) {
          return false;
        }

        $(this).show();
      });
    });

    $(parent).trigger('change');
  });
})(jQuery);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="sf-field-taxonomy-ad_cat" data-sf-field-name="_sft_ad_cat" data-sf-field-type="taxonomy" data-sf-field-input-type="select" data-sf-combobox="1" data-sf-term-rewrite="[&quot;http:\/\/site.com\/ad-category\/[0]\/&quot;]">
    <label>
  <select data-combobox="1" name="_sft_ad_cat[]" class="sf-input-select" title="">
    <option class="sf-level-0 sf-item-0" data-sf-count="0" data-sf-depth="0" value="">марка а/м</option>
    <option class="sf-level-0 sf-item-32" data-sf-count="1" data-sf-depth="0" value="alfa-romeo">Alfa Romeo</option>
    <option class="sf-level-0 sf-item-19 sf-option-active" selected="selected" data-sf-count="12" data-sf-depth="0" value="audi">Audi</option>		
  </select>
</label>
  </li>

  <li class="sf-field-taxonomy-ad_cat" data-sf-field-name="_sft_ad_cat" data-sf-field-type="taxonomy" data-sf-field-input-type="select" data-sf-combobox="1" data-sf-term-rewrite="[&quot;http:\/\/site.com\/ad-category\/[0]\/&quot;]">
    <label>
  <select data-combobox="1" name="_sft_ad_cat[]" class="sf-input-select" title="">
    <option class="sf-level-0 sf-item-0 sf-option-active" selected="selected" data-sf-count="0" data-sf-depth="0" value="">марка а/м</option>
    <option class="sf-level-0 sf-item-32" data-sf-count="1" data-sf-depth="0" value="alfa-romeo">Alfa Romeo</option>
    <option class="sf-level-1 sf-item-59" data-sf-count="1" data-sf-depth="1" value="156">&nbsp;&nbsp;&nbsp;156</option>
    <option class="sf-level-0 sf-item-19" data-sf-count="10" data-sf-depth="0" value="audi">Audi</option>
    <option class="sf-level-1 sf-item-60" data-sf-count="1" data-sf-depth="1" value="a6c5">&nbsp;&nbsp;&nbsp;A6C5</option>
    <option class="sf-level-1 sf-item-61" data-sf-count="1" data-sf-depth="1" value="a4">&nbsp;&nbsp;&nbsp;A4</option>
    <option class="sf-level-1 sf-item-62" data-sf-count="1" data-sf-depth="1" value="a6">&nbsp;&nbsp;&nbsp;A6</option>
  </select>
</label>
  </li>
</ul>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.