Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Не удается обратиться к нужному селектору и вызвать функцию jquery (https://javascript.ru/forum/misc/72257-ne-udaetsya-obratitsya-k-nuzhnomu-selektoru-i-vyzvat-funkciyu-jquery.html)

giwuf 18.01.2018 12:11
Не удается обратиться к нужному селектору и вызвать функцию jquery
 
Есть связаныне списки, которые я хочу перенести в итоговый проект на сайт на движке 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 18.01.2018 12:15
Здесь не нужен nth-child, первый список, это $(select:first), второй $(select:last).

giwuf 18.01.2018 12:45
Цитата:
Сообщение от laimas
Здесь не нужен nth-child, первый список, это $(select:first), второй $(select:last).
laimas, да! теперь работает, спасибо! А все же - почему nth-child не сработал?

laimas 18.01.2018 13:15
А что именно не работает?

giwuf 18.01.2018 14:05
Цитата:
Сообщение от laimas
А что именно не работает?
не отрабатывает функция - в нее не заходит
$(document).on('change', parent, function() {..}

laimas 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 18.01.2018 15:59
laimas, в тестовой версии - вопросов нет, у меня тоже все вызывается и работает, но при переносе на рабочий проект при сохранении той же структуры срабатывает только при 
$(select:first), $(select:last).

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

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

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

giwuf 18.01.2018 18:36
laimas, спасибо за пояснения!
Цитата:
Если на странице кроме двух списков SELECT будут и другие, то и селекторы $(select:first), $(select:last) также работать не будут.
Да, вы правы, есть и другие и добавляются динамически, но с этими классами только 2. А вот забавно, что как раз-таки $(select:first), $(select:last) при этом работают, а 'li:nth-child(1) select' нет..


Часовой пояс GMT +3, время: 21:19.