jQuery для нахождения всех предыдущих элементов, которые соответствуют выражению
Хорошо, я попробую это, это работает точно так, как вы просите. Вы можете использовать его в своем коде.
window.setInterval(function(){
changeLetterColor();
}, 3000);
function changeLetterColor(){
var string = "hello world";
var customstring ='';
for(var i =0;i<string.length;i++){
customstring += "<span font color= '#"+Math.floor(100000 + Math.random() * 900000)+"'>"+ string[i]+" </span>";
}
}
3 ответа
Хорошо, вот то, что я придумал - надо надеяться, это будет полезно во многих различных ситуациях. Это - 2 расширения jQuery, который я называю prevALL и nextALL. В то время как стандарт prevAll() соответствует предыдущим одноуровневым элементам, prevALL() соответствия ВСЕ предыдущие элементы полностью дерево DOM, так же для nextAll() и nextALL().
Я попытаюсь объяснить это в комментариях ниже:
// this is a small helper extension i stole from
// http://www.texotela.co.uk/code/jquery/reverse/
// it merely reverses the order of a jQuery set.
$.fn.reverse = function() {
return this.pushStack(this.get().reverse(), arguments);
};
// create two new functions: prevALL and nextALL. they're very similar, hence this style.
$.each( ['prev', 'next'], function(unusedIndex, name) {
$.fn[ name + 'ALL' ] = function(matchExpr) {
// get all the elements in the body, including the body.
var $all = $('body').find('*').andSelf();
// slice the $all object according to which way we're looking
$all = (name == 'prev')
? $all.slice(0, $all.index(this)).reverse()
: $all.slice($all.index(this) + 1)
;
// filter the matches if specified
if (matchExpr) $all = $all.filter(matchExpr);
return $all;
};
});
использование:
$('.myLinks').click(function() {
$(this)
.prevALL('.findme:first')
.html("You found me!")
;
// set previous nodes to blue
$(this).prevALL().css('backgroundColor', 'blue');
// set following nodes to red
$(this).nextALL().css('backgroundColor', 'red');
});
редактирование - функция, переписанная с нуля. Я просто думал о намного более быстром и более простом способе сделать это. Смотрите на историю редактирования для наблюдения моего первого повторения.
отредактируйте снова - нашел более легкий способ сделать это!
По-видимому, Вы делаете эту внутреннюю часть onclick обработчик, таким образом, у Вас есть доступ к элементу, который был нажат. То, что я сделал бы, делают преобладание, чтобы видеть, ли это на том же уровне. В противном случае затем я сделал бы родителя () .prevAll () для получения предыдущих одноуровневых элементов родительского элемента, затем выполнил бы итерации через тех назад, проверив их содержание на желаемый элемент. Продолжите подниматься дерево DOM, пока Вы не находите то, что Вы хотите или поражаете корень DOM. Это общий алгоритм.
Если Вы знаете, что это в таблице, то можно просто получить строку, содержащую нажатый элемент, и выполнить итерации назад через строки таблицы от той строки, пока Вы не находите тот, который содержит желаемый элемент.
Я не думаю, что существует способ сделать это в одном (цепочечном) операторе.
править: это решение работает и на Вашу исходную проблему, проблема, которую Вы упоминаете в своем первом комментарии и проблеме, которую Вы детализируете в комментарии после этого.
$('.myLinks').click(function() {
var findMe = '';
$(this).parents().each(function() {
var a = $(this).find('.findme').is('.findme');
var b = $(this).find('.myLinks').is('.myLinks');
if (a && b) { // look for first parent that
// contains .findme and .myLinks
$(this).find('*').each(function() {
var name = $(this).attr('class');
if ( name == 'findme') {
findMe = $(this); // set element to last matching
// .findme
}
if ( name == 'myLinks') {
return false; // exit from the mess once we find
// .myLinks
}
});
return false;
}
});
alert(findMe.text() ); // alerts "find this one"
});
это работает на Ваш пример в OP, а также измененный пример, как объяснено в комментариях:
<table>
<tr>
<td class="findme">don't find this one</td>
</tr>
<tr>
<td class="findme">find this one</td>
</tr>
<tr>
<td><a href="#" class="myLinks">find the previous .findme</a></td>
</tr>
<tr>
<td class="findme">don't find this one</td>
</tr>
</table>
а также этот тестовый сценарий, который Вы добавили:
<table>
<tr>
<td class="findme">don't find this one</td>
</tr>
<tr>
<td class="findme">don't find this one</td>
</tr>
<tr>
<td class="findme">find this one</td>
</tr>
</table>
<a href="#" class="myLinks">find the previous .findme</a>