Найти в родителе элемент с заданным классом
Добрый день.
Бьюсь на следующей задачей: структура хтмл такая:
<h3 class="hide-next">1</h3>
<div>
<h4 class="hide-next">2</h4>
<div>
<h5 class="hide-next">3</h5>
<div>
</div>
</div>
</div>
и так далее. так вот, мне нужно при клике на элементе hide-next найти всех его предков hide-next`ов. и их значение поместить в хэш-тэг страницы, чтобы при клике на самый нижний заголов в адресе получилось http://***.ru#1/2/3 получается пока что-то такое:
$('.hide-next').click(function() {
$(this).parents()
.map(function () {
return this.prev().text;
})
.get().join("/");
window.location.hash = parentEls;
});
я толкьо начинаю изучать jquery, абсолютно не понимаю, что в этом коде не так, в переменную ничего не записывается |
Круто! Даже в доку посмотрел. Только не туда посмотрел: там пример ниже показывает, что можно в parents селектор задавать:
.parents(".hide-next")
|
.map(function () {
return $(this).text();
})
|
$('.hide-next').click(function() {
var parentEls = $(this).parents('.hide-next')
.map(function () {
return $(this).text();
})
.get().join("/");
window.location.hash = parentEls;
});
переменная пустая, в хэш тэг ничего не записывается :( то ли поиск не производится, то ли надо чуть другим путём идти. первоначально идея была такая, найти предка и для каждого предка вернуть содержимое предыдущего элемента. |
$('.hide-next').click(function() {
var parentEls = $(this).parents('.hide-next')
.map(function () {
return $(this).text();
})
.get().join("/");
console.info(parentEls);
//window.location.hash = parentEls;
});
вот такой код выводит в консоль пустые строчки. |
может быть это из-за того, что .hide-next не является родителем нашего элемента, по которому кликнули?
|
$('.hide-next').click(function() {
var parentEls = $(this).parents("div").children('.hide-next')
.map(function () {
return $(this).text();
})
.get().join("/");
console.info(parentEls);
//window.location.hash = parentEls;
});
|
о, так работает. только это не до конца решает задачу. дело в том, что в одном диве может быть много элементов hide-next, кроме того, при клике на них висит функция, которая добавляет класс эктив и разворачивает следующий за ним элемент. конкретная задача — «запомнить весь путь до интересующего нас хайдера»
|
<h3 class="hide-next">1</h3>
<div>
<p>111</p>
<h4 class="hide-next">11</h4>
<div>
<p>12123</p>
<h5 class="hide-next">asda</h5>
<ul>
<li>a</li>
<li>b</li>
</ul>
</div>
<h4 class="hide-next">22</h4>
<p>12123</p>
</div>
<h3 class="hide-next">2</h3>
<div>
<p>12123</p>
<h5 class="hide-next">asda</h5>
<div>
<span class="hide-next">111</span>
<p>123123</p>
</div>
</div>
<h3 class="hide-next">3</h3>
<div>
<p>12123</p>
<h5 class="hide-next">asda</h5>
<ul>
<li>a</li>
<li>b</li>
</ul>
</div>
вот в это констукции по клику на хайдер внутри верхнего дива (по одному из двух) функция вернет значения обоих. если сделать проверку по классу "active", который навесится после клика, тоже может вернутся оба значения, если пользователь до этого открывал предыдущий. т.е. мою задачу по созданию ссылки на конкретный хайдер это не решает |
$('.hide-next').click(function() {
var parentEls = $(this).parents("div").prev('.hide-next')
.map(function () {
return $(this).text();
})
.get().join("/");
console.info(parentEls);
//window.location.hash = parentEls;
});
|
| Часовой пояс GMT +3, время: 14:08. |