Форум

OnArs · #1 (**permalink**) 14.10.2013, 15:34

Всем привет!

Бьюсь с этим целый день. Решил обратиться за помощью!

Исходные данные: На сайте в сайдбаре есть блок навигации описанный следующим кодом.

<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. Но либо это не то что мне нужно, либо Я не сумел ими воспользоваться назначению.

Надеюсь на помощь,
заранее благодарен!

BETEPAH · #2 (**permalink**) 14.10.2013, 15:40

Если я правильно понял, вам нужен .parent()
Можете выделить в коде, какую ссылку вы находите и какому элементу нужно прийти?

рони · #3 (**permalink**) 14.10.2013, 15:45

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>

OnArs · #4 (**permalink**) 14.10.2013, 15:46

Сообщение от BETEPAH

Если я правильно понял, вам нужен .parent()
Можете выделить в коде, какую ссылку вы находите и какому элементу нужно прийти?

Спасибо за быстрый ответ.

Я нахожу эту ссылку:

<li><a href="/2-2.html">Ссылка 2-2</a></li>

Нужно прийти к элементу:

<h2 class="trigger"><a href="#">Раздел 2</a></h2>

OnArs · #5 (**permalink**) 14.10.2013, 15:48

рони,
спасибо за быстрое решение! Это как раз то что мне нужно.

Тема исчерпана, но только если нет более изящного варианта

BETEPAH · #6 (**permalink**) 14.10.2013, 15:58

Сообщение от OnArs

только если нет более изящного варианта

Если разметка не меняется, то куда уж изящнее - 1 строчка кода всего

А если меняется, я бы решил нумерацией классов 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>

OnArs · #7 (**permalink**) 14.10.2013, 16:02

BETEPAH,
спасибо! Возьму это на заметку!

Форум

Справочник

Discord чат

Курсы javascript