Форум

giwuf · #1 (**permalink**) 18.01.2018, 12:11

Есть связаныне списки, которые я хочу перенести в итоговый проект на сайт на движке 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>

laimas · #2 (**permalink**) 18.01.2018, 12:15

Здесь не нужен nth-child, первый список, это $(select:first), второй $(select:last).

giwuf · #3 (**permalink**) 18.01.2018, 12:45

Сообщение от laimas

Здесь не нужен nth-child, первый список, это $(select:first), второй $(select:last).

laimas, да! теперь работает, спасибо! А все же - почему nth-child не сработал?

laimas · #4 (**permalink**) 18.01.2018, 13:15

А что именно не работает?

giwuf · #5 (**permalink**) 18.01.2018, 14:05

Сообщение от laimas

А что именно не работает?

не отрабатывает функция - в нее не заходит

$(document).on('change', parent, function() {..}

laimas · #6 (**permalink**) 18.01.2018, 14:12

Ну почему, вызов будет:

<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
    $(document).on('change', 'li:nth-child(1) select', function() {
        alert(this.value)
    });
});
</script>
</head>
<body>
<ul>
    <li>
        <select>
            <option>111</option>
            <option>222</option>
            <option>333</option>    
        </select>
    </li>
    <li>etc</li>
</ul>
</body>
</html>

giwuf · #7 (**permalink**) 18.01.2018, 15:59

laimas, в тестовой версии - вопросов нет, у меня тоже все вызывается и работает, но при переносе на рабочий проект при сохранении той же структуры срабатывает только при

$(select:first), $(select:last).

вот и гадаю - почему..

laimas · #8 (**permalink**) 18.01.2018, 17:02

Все правильно, значит вы устанавливаете обработчик по селектору, который на реальной странице будет обращаться совсем к другому элементу. Если на странице кроме двух списков SELECT будут и другие, то и селекторы $(select:first), $(select:last) также работать не будут.

Кроме этого, $(document).on('change', 'li:nth-child(1) select'..., это делегирование обработки элементу document, и требуется если потомки добавляются динамически на страницу. При этом делегировать обработку желательно не самому далекому предку, а самому ближайшему гарантированно существующему на странице.

giwuf · #9 (**permalink**) 18.01.2018, 18:36

laimas, спасибо за пояснения!

Цитата:

Если на странице кроме двух списков SELECT будут и другие, то и селекторы $(select:first), $(select:last) также работать не будут.

Да, вы правы, есть и другие и добавляются динамически, но с этими классами только 2. А вот забавно, что как раз-таки $(select:first), $(select:last) при этом работают, а 'li:nth-child(1) select' нет..

Форум

Справочник

Discord чат

Курсы javascript