jQuery: Як дістатися до певної дитини батьків?

92

Для спрощеного прикладу я маю наступний блок, який повторюється на сторінці багато разів (він динамічно генерується):

<div class="box">
   <div class="something1"></div>
   <div class="something2">
      <a class="mylink">My link</a>
   </div>
</div>

При натисканні я можу перейти до батьківського посилання за допомогою:

$(".mylink").click(function() {
   $(this).parents(".box").fadeOut("fast");
});

Однак ... мені потрібно дістатися до <div class="something1">цього конкретного батька.

В основному, хтось може сказати мені, як звернутися до брата або сестри вищого рівня, не маючи змоги звернутися до нього безпосередньо? Назвемо це старшим братом. Пряме посилання на ім’я класу старшого брата призведе до того, що кожен екземпляр цього елемента на сторінці зникне - що не є бажаним ефектом.

Я пробував:

parents(".box .something1") ... no luck.
parents(".box > .something1") ... no luck.
siblings() ... no luck.

Хто-небудь? Дякую.

— Том
джерело

Відповідь Анурага може здатися не правильною - це, безумовно, змусило мене зупинитися і задуматися, але це вказує на відверту помилку у вашому коді, яка спричиняє невдачу вашого селектора. Селектор у jQuery .parent() не є,.parents()

— Девід каже, що відновити Моніку

@ricebowl: Неправильно. api.jquery.com/parents

— SLaks

@ricebowl ... parent () дав би мені щось div2, тому мені потрібні батьки (), щоб дістатися до поля div.

— Том

Ах; мої вибачення. М-м-м-м ... Я не знаю, чи найкраще залишити своє невігластво на дисплеї, або видалити помилку, щоб не засмучувати когось іншого ... = | Все-таки, принаймні я сьогодні дізнався щось корисне; в цьому справа, правда ..? =)

— Девід каже відновити Моніку

1

@ricebowl, не хвилюйтесь, дякую за ваш внесок.

— Том

144

Виклик .parents(".box .something1")поверне всі батьківські елементи, які відповідають селектору .box .something. Іншими словами, він поверне батьківські елементи, які є .something1і знаходяться всередині.box .

Вам потрібно дістати дітей найближчого з батьків, наприклад:

$(this).closest('.box').children('.something1')

Цей код викликає, .closestщоб внутрішній батько відповідав селектору, а потім викликає .childrenцей батьківський елемент, щоб знайти дядька, якого ви шукаєте.

— Шлаки
джерело

Я знаю, що це трохи старе, але чи не краще в цьому випадку використовувати батьківський (), а не найближчий (), оскільки я думаю, що з найближчим () більше обходу дерева ?

— rmorse

1

@acSlater: Йому потрібен обхід дерева. parent()є неправильним елементом.

— Слакс

Ах, так це батьків (). Батько (), що Тому потрібно шкодувати! :)

— rmorse

1

@acSlater: Так; це спрацювало б. Однак це робить Javascript набагато тіснішим до структури HTML. .closest(...)є більш еластичним і також читабельнішим.

— Слакс

8

Якщо хтось задається питанням: після того, як ви знайшли правильного батька за допомогою .closest (), якщо ви шукаєте дочірній елемент, який НЕ є прямим нащадком (але, наприклад, дочірньою дитиною дитини), просто використовуйте. find () замість .children.

— Fabien Snauwaert

17

$(this).parent()

Обхід дерев - це весело

$(this).parent().siblings(".something1");

$(this).parent().prev(); // if you always want the parent's previous sibling

$(this).parents(".box").children(".something1");

І багато іншого, ці документи вам можуть бути корисними.

— Анураг
джерело

Дякую, але шукав не батьків, а іншу дитину батьків (або насправді бабусь і дідусів).

— Том

Хе-хе ... справді це сімейна справа.

— Том

13

Це знайде першого батьківського класу з класом, boxпотім знайде перший дочірній клас зі збігом регулярних виразів somethingі отримає ідентифікатор.

$(".mylink").closest(".box").find('[class*="something"]').first().attr("id")

— користувач2601995
джерело

6

Якщо я правильно зрозумів вашу проблему, $(this).parents('.box').children('.something1')це те, що ви шукаєте?

— Тея Кантамні
джерело

5

Ви можете використовувати .each()з .children()і селектор в дужках:

//Grab Each Instance of Box.
$(".box").each(function(i){

    //For Each Instance, grab a child called .something1. Fade It Out.
    $(this).children(".something1").fadeOut();
});

— Оллі
джерело