Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 18.01.2018, 12:11
Профессор
Отправить личное сообщение для giwuf Посмотреть профиль Найти все сообщения от giwuf
 
Регистрация: 16.05.2017
Сообщений: 167

Не удается обратиться к нужному селектору и вызвать функцию 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>
Ответить с цитированием
  #2 (permalink)  
Старый 18.01.2018, 12:15
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Здесь не нужен nth-child, первый список, это $(select:first), второй $(select:last).
Ответить с цитированием
  #3 (permalink)  
Старый 18.01.2018, 12:45
Профессор
Отправить личное сообщение для giwuf Посмотреть профиль Найти все сообщения от giwuf
 
Регистрация: 16.05.2017
Сообщений: 167

Сообщение от laimas
Здесь не нужен nth-child, первый список, это $(select:first), второй $(select:last).
laimas, да! теперь работает, спасибо! А все же - почему nth-child не сработал?
Ответить с цитированием
  #4 (permalink)  
Старый 18.01.2018, 13:15
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

А что именно не работает?
Ответить с цитированием
  #5 (permalink)  
Старый 18.01.2018, 14:05
Профессор
Отправить личное сообщение для giwuf Посмотреть профиль Найти все сообщения от giwuf
 
Регистрация: 16.05.2017
Сообщений: 167

Сообщение от laimas
А что именно не работает?
не отрабатывает функция - в нее не заходит
$(document).on('change', parent, function() {..}
Ответить с цитированием
  #6 (permalink)  
Старый 18.01.2018, 14:12
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

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

<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>
Ответить с цитированием
  #7 (permalink)  
Старый 18.01.2018, 15:59
Профессор
Отправить личное сообщение для giwuf Посмотреть профиль Найти все сообщения от giwuf
 
Регистрация: 16.05.2017
Сообщений: 167

laimas, в тестовой версии - вопросов нет, у меня тоже все вызывается и работает, но при переносе на рабочий проект при сохранении той же структуры срабатывает только при
$(select:first), $(select:last).

вот и гадаю - почему..
Ответить с цитированием
  #8 (permalink)  
Старый 18.01.2018, 17:02
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

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

Кроме этого, $(document).on('change', 'li:nth-child(1) select'..., это делегирование обработки элементу document, и требуется если потомки добавляются динамически на страницу. При этом делегировать обработку желательно не самому далекому предку, а самому ближайшему гарантированно существующему на странице.
Ответить с цитированием
  #9 (permalink)  
Старый 18.01.2018, 18:36
Профессор
Отправить личное сообщение для giwuf Посмотреть профиль Найти все сообщения от giwuf
 
Регистрация: 16.05.2017
Сообщений: 167

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как обновить содержимое div (или какую функцию вызвать)? unity555 Events/DOM/Window 3 19.12.2017 16:38
как вызвать функцию при нажатии на ссылку imedia Элементы интерфейса 0 22.04.2016 20:48
как обратиться к элементу созданному с помощью jQuery .after() ? mitiya Общие вопросы Javascript 1 25.09.2012 03:11
Как передать переменную в функцию с помощью JQuery??? Иван Я Events/DOM/Window 3 20.01.2012 11:21
Как вызвать callback функцию oke11o jQuery 12 17.01.2012 13:36