Выберите следующий пробел класса после текущего селектора

Я пытаюсь изменить состояние одного поля формы «idSerialNo» на основе изменений в другом «idVerification», но мне трудно получить доступ к правильному элементу, так как на странице есть три формы.Выберите следующий пробел класса после текущего селектора

Соответствующий раздел каждого для выглядит следующим образом:

// Input 1, a select element 
<div id="sigIDVerification_field" class="clearfix "> 
    <label for="sigIDVerification"> … </label> 
    <div class="input"> 
     <select id="sigIDVerification" class="span5 selectpicker sortable idVerification" name="sigIDVerification" style="display: none;"> … </select> 
     <div class="btn-group bootstrap-select span5 sortable idVerification"> … </div> 
     <span class="help-inline"></span> 
     <span class="help-block"></span> 
    </div> 
</div> 
// Input 2, a text input 
<div id="sigIDSerialNo_field" class="clearfix "> 
    <label for="sigIDSerialNo"> … </label> 
    <div class="input"> 
     <input id="sigIDSerialNo" class="span5 idSerialNo" type="text" value="" name="sigIDSerialNo"></input> 
     <span class="help-inline"></span> 
     <span class="help-block"></span> 
    </div> 
</div>

Обратите внимание, что упаковка на выборе элемента из-за настраиваемую кожу.

Я пытаюсь зарегистрировать прослушиватель событий для элемента select.idVerification каждой из трех форм. Когда элемент select изменен, я хочу проверить, является ли это значением по умолчанию, если он так скрывает блок div (здесь div#sigIDSerialNo_field) и устанавливает значение input.idSerialNo по ""; если значение элемента выбора не является значением по умолчанию, оно будет отображать div#sigIDSerialNo_field, если оно скрыто. Моя проблема в том, что идентификатор для каждого из divs, чтобы показать/скрыть, будет другим, и из моего контроля.

Что я хочу сделать, это выбрать следующее происшествие .idSerialNo после этого .idVerification, а затем я могу получить дедушку и бабушку элемента .idSerialNo. Тем не менее, я обнаружил, что .next() работает только на прямых братьев и сестер, поэтому я не могу этого использовать.

Есть ли способ, которым я могу выполнить свою цель?

источник

2013-09-10 evanjdooner

Вы можете добраться до следующего .idSerialNo в той же форме, как это:

// assume item is jQuery object pointing to your current .idSerialNo 
var nextSerialNo = item.closest("div.clearfix").next().find(".idSerialNo");

Это находит прародителем текущего .idSerialNo, затем находит на следующий DIV в HTML, что это на том же уровне форма, в которой вы сейчас находитесь, затем находит объект .idSerialNo в этом div.

Этот код предполагает, что селектор "div.clearfix" всегда будет определять правильный родительский элемент. Если это не так, тогда вам нужно последовательно установить лучший класс на этом родителе или написать больше кода, чтобы найти правильный родительский объект с любой логикой для всего HTML. Вы не раскрываете весь HTML, поэтому я не могу определить, какой шаблон будет работать, если "div.clearfix" не работает повсюду.

Ключ к этой навигации поднимается вверх по иерархии справа от родителя, а затем собирается .next(), затем с использованием .find() в правом родителе.

источник

2013-09-10 14:53:32 jfriend00

элемент будет объект JQuery, указывающий на текущий '.idVerification' и я хочу найти следующий '.idSerialNo' _ в той же форме. – evanjdooner

@evanjdooner - Я изменил свой ответ, чтобы сделать то, что вы просили в своем комментарии. – jfriend00

Это div.clearFix генерируется как родитель верхнего уровня для каждого блока полей формы, поэтому он должен работать каждый раз. Я попробую ваше предложение и вернусь к вам. – evanjdooner

Добавить прослушиватель событий, чтобы проверить, выбран ли выбранный элемент по умолчанию (я предположил, что это первый элемент - индекс 0) и скрыть родной div.clearfix из ближайшего класса div.clearfix и очистить ввод в брате.

Проверьте обновленную версию. Использование next() предполагает, что между div не существует элементов. Я изменил его на siblings(), чтобы убедиться, что он будет работать, даже если между div s есть другие элементы.

Demo

$(function() { 
    $("select.idVerification").change(function() { 

     var divToHide = $(this).closest("div.clearfix").siblings("div.clearfix"); 

     if ($(this)[0].selectedIndex == 0) { 
      // clear input 
      divToHide.find(".idSerialNo").val(""); 
      // hide 
      divToHide.hide(); 

     } else { 
      // show 
      divToHide.show(); 
     } 
    }); 
});

источник

2013-09-10 15:37:28 Lobo

Ваш ответ скрывает первый блок (содержащий элемент select). Моя цель - скрыть второй блок (содержащий текстовое поле), а значение элемента выбора - по умолчанию. – evanjdooner

@evanjdooner см. Обновленный ответ и демонстрацию. изменено с 'next' на' siblings' – Lobo

В этом конкретном случае divs будут рядом друг с другом. Я не уверен, повлияет ли это на 'siblings()', но будут другие элементы div.clearfix на одном уровне документа. – evanjdooner

Я решил на следующее решение, основываясь на ответах jfriend00 и Лобо:

var idVerification = $("select.idVerification"); 

idVerification.each(function() { 
    var nextIDSerialNo_field = $(this).closest("div.clearfix").next(); 
    nextIDSerialNo_field.addClass('hidden'); 
    nextIDSerialNo_field.hide(0); 
}); 

idVerification.change(function() { 

    var nextIDSerialNo = $(this).closest("div.clearfix").next().find(".idSerialNo"); 
    var nextIDSerialNo_field = $(this).closest("div.clearfix").next(); 

    if($(this).val() === "NONE"){ 
     nextIDSerialNo_field.hide('slow'); 
     nextIDSerialNo_field.addClass("hidden"); 
     nextIDSerialNo.val(""); 
    } else { 
     nextIDSerialNo_field.removeClass("hidden"); 
     nextIDSerialNo_field.show("slow"); 
    } 
});

источник

2013-09-10 16:23:12 evanjdooner

Выберите следующий пробел класса после текущего селектора

ответ

Смежные вопросы