2015-04-14 3 views
1

У меня есть HTML-страница с некоторыми <input> тегом, который пришел после того, как <span class="class1"> я хочу, чтобы выбрать все эти входные тег, что disabledкак выбрать специальный тег после другого специального тега с JQuery

, как я могу сделать это с помощью JQuery селектор?

Я тест $('span.class1+ :disabled'), но это не работает!

мой HTML является Somthing так:

<span class="class1"></span> 
<input type="text" disabled/> 
<span class="class1"></span> 
<input type="text"/> 
<input type="text" disabled/> 

я хочу, чтобы выбрать все входные данные, как первый вход (примечание: не нравится третий вход)

+0

Для чего нужен «+»? –

+2

Пожалуйста, покажите свой HTML и уточните, какие элементы вы хотите выбрать. – Barmar

+1

@GaryStorey Селектор («элемент + следующий») выбирает «следующий» элемент указанного «элемента» – Ebrahimi

ответ

3

другие ответы не имеют ограничений относительно того, когда прекратить поиск. Они обрабатывают всех братьев и сестер после каждого класса 1 (независимо от span между ними, которые должны действовать как «заборы»).

на основе макета, вы хотите, чтобы остановить после того, как она попадает на следующий срок, так что используйте nextUntil ограничить поиск и фильтр, чтобы предназначаться только необходимые элементы:

$(document).ready(function(){ 
 
    $('span.class1').nextUntil('span').filter('input:disabled').val('disabled text box') 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<span class="class1"> span class1 </span> 
 
<input type="text" class="" disabled /><br/> 
 
<span class="class1"> span class1 </span> 
 
<input type="text" disabled/><br/> 
 
<span class="class1"> span class1 </span> 
 
<input type="text"/><br/> 
 
<input type="text" disabled/><br/> 
 
<span class="class2"> span class2 </span> 
 
<input type="text"/><br/> 
 
<input type="text" disabled/>

Вы отметите этот один не устанавливает текст последнего ввода (как это не после class1 пядь.

Как @Nishit Maheta отметил (после того, как приложение окончание моего ответа на него), вы можете укоротить его до:

$('span.class1').nextUntil('span', 'input:disabled').val('disabled text box') 
2

использовать ниже код. отключенный элемент после span.class1

подробнее о :disabled селекторе

вам нужно проверить .nextAll()

Получить все следующие брат и сестра каждого элемента в наборе соответствующих элементов, при необходимости отфильтрованного селектора.

$(document).ready(function(){ 

    $('span.class1').nextAll('input:disabled'); 

}); 

Работа демо

$(document).ready(function(){ 
 
    $('span.class1').nextAll('input:disabled').val('disabled text box') 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<span class="class1"> span </span> 
 
<input type="text" class="" disabled /> 
 
<span class="class1"></span> 
 
<input type="text" disabled/> 
 
<span class="class1"></span> 
 
<input type="text"/> 
 
<input type="text" disabled/>

Как TrueBlueAussie упоминание в комментариях у меня есть добавить новый вариант решить проблему

$(document).ready(function(){ 
 
    $('span.class1').nextUntil('span','input:disabled').val('disabled text box') 
 
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<span class="class1"> span class1 </span> 
 
<input type="text" class="" disabled /><br/> 
 
<span class="class1"> span class1 </span> 
 
<input type="text" disabled/><br/> 
 
<span class="class1"> span class1 </span> 
 
<input type="text"/><br/> 
 
<input type="text" disabled/><br/> 
 
<span class="class2"> span class2 </span> 
 
<input type="text"/><br/> 
 
<input type="text" disabled/>

+1

Думаю, он хочет только тех, кто после 'span.class1'. Я попросил его разъяснить вопрос. – Barmar

+0

@Barmar yes answer updated –

+0

Это выберет * все * братья и сестры, пробегающие любые другие промежутки. Он нуждается в некоторой форме ограничения –

0

Попробуйте с использованием Next Siblings Selector (“prev ~ siblings”)

Описание: Выбирает все элементы одноуровневые, которые следуют после "пред" элемента, имеют один и тот же родительский, и соответствуют фильтрации «братьев и сестер " селектор.

var disabled = $("span.class1 ~ input:disabled"); 
 

 
disabled.css("border", "2px solid brown");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<span class="class1"></span> 
 
<input type="text" disabled /> 
 
<span class="class1"></span> 
 
<input type="text"/> 
 
<input type="text" disabled />

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