У меня есть идентификатор для <tr id="tagTR"> Учитывая вышеизложенное, можно ли найти следующий элемент input:text независимо от любой другой разметки между ними. Есть ли селектор jQuery, который я могу использовать для этого сценария?
Например :
<tr id="tagTR">
</tr>
<tr id="tagRed">
<td> </td>
</tr>
<div>
<tr>
<td>
<input> // This is what I want to get to.
</td>
</tr>
</div>
Я думал, что этот вопрос был очень интересным. Кажется, другие читают это как поиск следующего входа среди братьев и сестер. Но я прочитал это как - найди мне следующий вход несмотря ни на что. Я не знаю, если это в родном брате, родителя или родного брата родителя. Это то, что я придумал на основе отзывов, которые я получил от этот вопрос.
//assume you know where you are starting from
var $startElement = $('#foo');
//get all text inputs
var $inputs = $('input[type=text]');
//search inputs for one that comes after starting element
for (var i = 0; i < $inputs.length; i++) {
if (isAfter($inputs[i], $startElement)) {
var nextInput = $inputs[i];
alert($(nextInput).val());
}
}
//is element before or after
function isAfter(elA, elB) {
return ($('*').index($(elA).last()) > $('*').index($(elB).first()));
}
На основе отличного ответа от @mrtsherman, я написал более полное решение:
(function( $ ){
$.fn.findNext = function(sel) {
var $result = $(sel).first();
if ($result.length <= 0) {
return $result;
}
$result = [];
var thisIndex = $('*').index($(this));
var selIndex = Number.MAX_VALUE; // Number.MAX_SAFE_INTEGER is not yet fully supported
$(sel).each(function(i,val){
var valIndex = $('*').index($(val));
if (thisIndex < valIndex && valIndex < selIndex) {
selIndex = valIndex;
$result = $(val);
}
});
return $result;
};
})( jQuery );
Затем вы можете использовать его следующим образом:
$('#tagTR').findNext('input');
Я бы отправил PR для этого в jQuery lib, если бы знал свой код был должным образом оптимизирован, и если г-н Т. Шерман не возражал, это означает, что я думаю, что это должен быть основной метод в jQuery! :П
@Cawas - хорошее решение, но советую не злоупотреблять, ибо $('*') дорого ;-)
Несмотря на это, я расширил его для своих нужд:
(function( $ ){
$.fn.findNextOverall = function(sel, returnItselfIfMatched) {
if(returnItselfIfMatched && $(this).is(sel)) return $(this);
var $result = $(sel).first();
if ($result.length <= 0) {
return $result;
}
$result = [];
var thisIndex = $('*').index($(this));
var selIndex = Number.MAX_SAFE_INTEGER;
$(sel).each(function(i,val){
var valIndex = $('*').index($(val));
if (thisIndex < valIndex && valIndex < selIndex) {
selIndex = valIndex;
$result = $(val);
}
});
return $result;
};
})( jQuery );
Итак, если returnItselfIfMatched установлен true, он возвращает себя, если он соответствует самому селектору. Полезно, если не знаешь, какой элемент вызывает и ищешь именно себя.
$('*')... Итак, вы в основном добавили туда только очень конкретный if, что является довольно узким вариантом использования. Я бы сказал, что это было бы лучше в качестве расширенной функции в вашем коде или прямо в самом коде.
- person cregox; 21.04.2015
$('*') можно было бы оптимизировать рекурсивным переходом через следующий более высокий уровень возврата при сопоставлении с первым элементом. Но для меня в моем проекте все в порядке. Привет, Андре.
- person Andre Lehnert; 21.04.2015
У вас не может быть тега div между TR's. Это недопустимая разметка.
Чтобы найти элемент input из указанного tr, вы можете попробовать это.
$('#tagTR').nextAll().filter(function(){
return $(this).find('input:text').length > 1;
}).find('input');
nextAll().
- person Jeff Wilbert; 18.01.2012
.parents() для перебора всех родителей узла TR и с каждым родителем использовать .nextAll() для поиск всех его братьев и сестер для ввода. Я только что понял, что даже тогда это не сработает именно потому, что родительский узел может иметь входные данные, которые находятся перед тем, где находится элемент тега.
- person Jeff Wilbert; 18.01.2012
.parents() и .nextAll() для поиска входных данных это, например, jsfiddle.net/WNsaD посмотрите на разметку HTML. Вы должны убедиться, что найденный ввод находится впереди/перед элементом маркера, а не за ним.
- person Jeff Wilbert; 18.01.2012
Вы можете использовать «далее»:
$("#tagTR").next("input")
next просматривает только непосредственно следующего брата и возвращает его, если он соответствует селектору.
- person James Allardice; 18.01.2012
<tr>элементов с<div>родительскими и одноуровневыми элементами, что является недопустимым HTML. - person Frédéric Hamidi schedule 18.01.2012nextAll()для поиска всех братьев и сестер относительно известного элемента маркера, и если то, что вы ищете, не найдено, возьмите список.parents()известного элемента и переберите каждого брата и сестры каждого родителя, чтобы найти рассматриваемый элемент, в основном вызовnextAll()для каждого родителя вашего известного элемента. - person Jeff Wilbert schedule 18.01.2012