JQuery Ближайшие и родители не работают с вводом и вложенными Div - PullRequest
Новая
       28

JQuery Ближайшие и родители не работают с вводом и вложенными Div

1 голос
/ 18 января 2012

У меня есть скрытые элементы Div с классами ".display-link", которые находятся на два уровня выше поля ввода.При щелчке по входу (флажок) он должен отображать скрытую ссылку в оболочке предыдущего родного брата родителя.

Или, иначе говоря, если щелкнуть флажок ввода, он должен найти предыдущий элемент div сclass .display-link и show () что.

У меня проблемы с прохождением элементов для достижения этого div с этим классом.Он должен отображать только один предыдущий div. 

<!DOCTYPE HTML>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>

$(document).ready(function(){

$(".display-link").hide();//hide all links

$('input').click (function ()
    {
    $(this).closest(".display-link").show();//doesn't work
    $(this).closest("div.display-link").show();//doesn't work
    myInput = $(this);
    $(myInput).closest(".display-link").show();//doesn't work
    $(myInput).parents(".display-link").show();//doesn't work
    $(myInput).prevUntil(".display-link").show();//doesn't work
    });
});
</script>
</head>

<body>
<div class="accordion-button">First Heading
  <div class="display-link">LINK</div>
</div>
<div class="collapsible">
  <div class="input-row">
    <input id="checkbox01" name="checkbox01" type="checkbox" value="value01"  />
    <label for="checkbox01" >Name 1</label>
  </div>
  <div class="input-row">
    <input id="checkbox02" name="checkbox02" type="checkbox" value="value02"  />
    <label for="checkbox02" >Name 2</label>
  </div>
</div>
<div class="accordion-button">Second Heading
  <div class="display-link">LINK</div>
</div>
<div class="collapsible">
  <div class="input-row">
    <input id="checkbox03" name="checkbox03" type="checkbox" value="value03"  />
    <label for="checkbox03" >Name 3</label>
  </div>
</div>
</body>
</html>

Мне нужно выйти из разборного div в div-кнопку гармошки до div-элемента display-link.

Ответы [ 4 ]

1 голос
/ 18 января 2012 
$('input').on('click', function () {
    $(this).parents('.collapsible').prev('.accordion-button').children('.display-link').show();
});

Вот демоверсия: http://jsfiddle.net/hazvX/

Находит родительский элемент .collapsible, находит предыдущий элемент .accordion-button, затем выбирает его дочерний элемент .display-link.

Ваш HTML показывает, что есть два .display-link элемента и три входа. Если вы хотите, чтобы входы находили первые возможные (предыдущие) элементы .display-link, вы можете использовать .prevAll() вместо .prev(): 

$('input').on('click', function () {
    $(this).parents('.collapsible').prevAll('.accordion-button').eq(0).children('.display-link').show();
});

Вот демоверсия: http://jsfiddle.net/hazvX/1/

Обратите внимание, я также добавил .eq(0) после функции .prevAll(), чтобы получить только первый возвращенный элемент (поскольку их может быть несколько).

Обратите внимание, что .on() является новым в jQuery 1.7 и в этом случае то же самое, что и .bind().

1 голос
/ 18 января 2012

Так как элемент .display-link, который вы хотите отобразить, не является родным братом или предком флажка, вы не можете сделать это за один шаг. Сначала перейдите к элементу .collapsible, который является родственным элементом .accordion-button, затем возьмите предыдущий элемент, который является .accordion-button, и найдите внутри него элемент .display-link: 

$(":checkbox").click(function() {
    $(this).closest(".collapsible").prev().find("display-link").show();
});

Метод closest просматривает только элементы-предки, как и parents. Метод prevUntil рассматривает только предшествующих братьев и сестер.

Обратите внимание, что приведенное выше будет работать только в том случае, если ваша структура останется такой, как в вопросе. Если вы добавляете элементы в местах, которые могут повлиять на приведенный выше код, вам придется соответствующим образом изменить его. Вы можете сделать его более надежным, если считаете, что DOM может измениться: 

$(this).closest(".collapsible").prevAll(".accordion-button:first").find(".display-link").show();
0 голосов
/ 18 января 2012

Другое решение, которое я здесь добавлю, состоит в том, что если у каждого входа есть соответствующая ссылка для отображения, вы можете использовать индекс

http://jsfiddle.net/7TaqC/

Теперь, конечно, в вашем примере есть 3 входа и только 2 ссылки, однако я не знаю, так ли это, потому что это всего лишь небольшой фрагмент вашего кода 

$(".display-link").hide();//hide all links

$('input').click (function (e)
{
   $this = $(this);
var index = $('input').index($this);
$('.display-link').eq(index).show();

});
0 голосов
/ 18 января 2012

Родители, самые близкие не будут работать, потому что это не по тому же пути.

Можете ли вы дать им удостоверение личности или поместить их в другой контейнер: http://jsfiddle.net/Cq9Cw/

...