Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 14.10.2013, 15:34
Новичок на форуме
Отправить личное сообщение для OnArs Посмотреть профиль Найти все сообщения от OnArs
 
Регистрация: 05.10.2008
Сообщений: 5

Выбор ближайшего элемента вверх по коду
Всем привет!

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

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

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

Надеюсь на помощь,
заранее благодарен!
Ответить с цитированием
  #2 (permalink)  
Старый 14.10.2013, 15:40
Аватар для BETEPAH
Профессор
Отправить личное сообщение для BETEPAH Посмотреть профиль Найти все сообщения от BETEPAH
 
Регистрация: 23.06.2011
Сообщений: 1,165

Если я правильно понял, вам нужен .parent()
Можете выделить в коде, какую ссылку вы находите и какому элементу нужно прийти?
Ответить с цитированием
  #3 (permalink)  
Старый 14.10.2013, 15:45
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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>
Ответить с цитированием
  #4 (permalink)  
Старый 14.10.2013, 15:46
Новичок на форуме
Отправить личное сообщение для OnArs Посмотреть профиль Найти все сообщения от OnArs
 
Регистрация: 05.10.2008
Сообщений: 5

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

Я нахожу эту ссылку:
<li><a href="/2-2.html">Ссылка 2-2</a></li>


Нужно прийти к элементу:
<h2 class="trigger"><a href="#">Раздел 2</a></h2>
Ответить с цитированием
  #5 (permalink)  
Старый 14.10.2013, 15:48
Новичок на форуме
Отправить личное сообщение для OnArs Посмотреть профиль Найти все сообщения от OnArs
 
Регистрация: 05.10.2008
Сообщений: 5

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

Тема исчерпана, но только если нет более изящного варианта
Ответить с цитированием
  #6 (permalink)  
Старый 14.10.2013, 15:58
Аватар для BETEPAH
Профессор
Отправить личное сообщение для BETEPAH Посмотреть профиль Найти все сообщения от BETEPAH
 
Регистрация: 23.06.2011
Сообщений: 1,165

Сообщение от 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>
Ответить с цитированием
  #7 (permalink)  
Старый 14.10.2013, 16:02
Новичок на форуме
Отправить личное сообщение для OnArs Посмотреть профиль Найти все сообщения от OnArs
 
Регистрация: 05.10.2008
Сообщений: 5

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Выбор элемента по координатам CiliZ jQuery 1 05.02.2013 20:59
теги в выделенном фрагменте woojin Events/DOM/Window 48 15.08.2012 19:13
Выбор несуществующего элемента nematod Элементы интерфейса 1 12.03.2012 02:39
Выбор предыдущего элемента leny jQuery 6 09.12.2011 09:02
Выбор элемента по class nematod Общие вопросы Javascript 3 20.01.2011 14:48