Выбор ближайшего элемента вверх по коду
Всем привет!
Бьюсь с этим целый день. Решил обратиться за помощью! :help: Исходные данные: На сайте в сайдбаре есть блок навигации описанный следующим кодом. <h2 class="trigger"><a href="#">Раздел 1</a></h2> <div class="toggle_container"> <ul> <li><a href="/1-1.html">Ссылка 1-1</a></li> <li><a href="/1-2.html">Ссылка 1-2</a></li> <li><a href="/1-3.html">Ссылка 1-3</a></li> </ul> </div> <h2 class="trigger"><a href="#">Раздел 2</a></h2> <div class="toggle_container"> <ul> <li><a href="/2-1.html">Ссылка 2-1</a></li> <li><a href="/2-2.html">Ссылка 2-2</a></li> </ul> </div> <h2 class="trigger"><a href="#">Раздел 3</a></h2> <div class="toggle_container"> <ul> <li><a href="/3-1.html">Ссылка 3-1</a></li> <li><a href="/3-2.html">Ссылка 3-2</a></li> <li><a href="/3-3.html">Ссылка 3-3</a></li> <li><a href="/3-4.html">Ссылка 3-4</a></li> </ul> </div> По адресу на которой сейчас находится пользователь Я определяю по какой ссылке он перешёл и нахожу эту ссылку с использованием jQuery следующим образом:
$("a[href='"+req_uri+"']")
Для простоты пусть будет так: req_uri='/2-2.html'; Задача следующая: Нужно сделать addClass для ближайшего элемента с классом trigger вверх по коду. В данном случае это вот этот элемент: <h2 class="trigger"><a href="#">Раздел 2</a></h2> Я уже перебрал и closest, prev и find. Но либо это не то что мне нужно, либо Я не сумел ими воспользоваться назначению. Надеюсь на помощь, заранее благодарен! :-? |
Если я правильно понял, вам нужен .parent()
Можете выделить в коде, какую ссылку вы находите и какому элементу нужно прийти? |
OnArs,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.red{
background: #FF0000
}
</style>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script>
<script>
$(function() {
var req_uri='/2-2.html';
$("a[href='"+req_uri+"']").parents('.toggle_container').prev().addClass('red')
});
</script>
</head>
<body>
<h2 class="trigger"><a href="#">Раздел 1</a></h2>
<div class="toggle_container">
<ul>
<li><a href="/1-1.html">Ссылка 1-1</a></li>
<li><a href="/1-2.html">Ссылка 1-2</a></li>
<li><a href="/1-3.html">Ссылка 1-3</a></li>
</ul>
</div>
<h2 class="trigger"><a href="#">Раздел 2</a></h2>
<div class="toggle_container">
<ul>
<li><a href="/2-1.html">Ссылка 2-1</a></li>
<li><a href="/2-2.html">Ссылка 2-2</a></li>
</ul>
</div>
<h2 class="trigger"><a href="#">Раздел 3</a></h2>
<div class="toggle_container">
<ul>
<li><a href="/3-1.html">Ссылка 3-1</a></li>
<li><a href="/3-2.html">Ссылка 3-2</a></li>
<li><a href="/3-3.html">Ссылка 3-3</a></li>
<li><a href="/3-4.html">Ссылка 3-4</a></li>
</ul>
</div>
</body>
</html>
|
Цитата:
Я нахожу эту ссылку: <li><a href="/2-2.html">Ссылка 2-2</a></li> Нужно прийти к элементу: <h2 class="trigger"><a href="#">Раздел 2</a></h2> |
рони,
спасибо за быстрое решение! Это как раз то что мне нужно. :thanks: Тема исчерпана, но только если нет более изящного варианта :dance: |
Цитата:
А если меняется, я бы решил нумерацией классов trigger:
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.red{
background: #FF0000
}
</style>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script>
<script>
$(function() {
var trigg = '/2-2.html'.charAt(1);
$(".trigger" + trigg).addClass('red')
});
</script>
</head>
<body>
<h2 class="trigger1"><a href="#">Раздел 1</a></h2>
<div class="toggle_container">
<ul>
<li><a href="/1-1.html">Ссылка 1-1</a></li>
</ul>
</div>
<h2 class="trigger2"><a href="#">Раздел 2</a></h2>
<div class="toggle_container">
<ul>
<li><a href="/2-1.html">Ссылка 2-1</a></li>
<li><a href="/2-2.html">Ссылка 2-2</a></li>
</ul>
</div>
<h2 class="trigger3"><a href="#">Раздел 3</a></h2>
<div class="toggle_container">
<ul>
<li><a href="/3-1.html">Ссылка 3-1</a></li>
</ul>
</div>
</body>
</html>
|
BETEPAH,
спасибо! Возьму это на заметку! :thanks: |
| Часовой пояс GMT +3, время: 10:59. |