how to find the siblings of parent using jquery

Question

in my case am having a two html elements covered by a another element(grand parent) like this

 <div class="tabs">
  <ul class="header">
    <li> <a> </a> </li>
  </ul>
  <div class="content show"> </div>
  </div>

here tabs is a grand parent and header and show are its child my problem is while clicking <a> which is a grand child of header need to remove a class show sibling of header

i used closest() it doesn't help's here my tried demo

$(this).closest('content').removeClass('show');

help me out

EDIT: (markup in jsfiddle)

<div class="tabs">
    <ul class="tabheader">
        <li class="active"><a href="#fragment-1"><span>FAQs</span></a>
        </li>
        <li><a href="#fragment-2"><span>Credit bundle</span></a>
        </li>
        <li><a href="#fragment-3"><span>Delivery & turnaround times</span></a>
        </li>
        <li><a href="#fragment-4"><span>Testimonials</span></a>
        </li>
    </ul>
    <div class="clearfix"></div>
    <div id="fragment-1" class="tabed_contents show">adasdasd</div>
    <div id="fragment-2" class="tabed_contents">adasdasd</div>
    <div id="fragment-3" class="tabed_contents">adasdasd</div>
    <div id="fragment-4" class="tabed_contents">adasdasd</div>
</div>

Notice that you missed a `.` in `$(this).closest('content').removeClass('show');` — Sergio, Oct 09 '13 at 10:17
yea i missed now the mistake is fixed and my new problem is when remove Show class it remove all show class on same page how do i prevent it..? http://jsfiddle.net/VkranthVivek/69z5B/44/ — , Oct 09 '13 at 10:22
Do you have more than one element with class `.show` inside each `div.tabs` ? — Sergio, Oct 09 '13 at 10:43
@Sergio No am having more than one div.tabs which having only one show class.. — , Oct 09 '13 at 12:37
Then the first alternative Rory wrote should work: `$(this).closest('.tabs').find('.tabed_contents ').removeClass('show');` — Sergio, Oct 09 '13 at 12:54
@Sergio still the same problem :( http://jsfiddle.net/VkranthVivek/69z5B/48/ — , Oct 09 '13 at 13:12
I don't get the problem... Check here http://jsfiddle.net/69z5B/49/ - what is not working? — Sergio, Oct 09 '13 at 13:16
@Sergio Am having two tab navigation in a same page right.there im having `show` class the purpose of `show` class was while loading a page the first content of tab menu should be shown.now the problem is am having multiple tab menu in a same page while viewing first menu the `show` class for other menu also get removed.. :( — , Oct 09 '13 at 13:33
Ok, nice! please accept Rory's answer. I added that info there. — Sergio, Oct 09 '13 at 13:45

score 3 · Accepted Answer · edited Oct 09 '13 at 13:44

3

Firstly, you need to use the . prefix in your class selector. However, what you have is looking for the parent .content element, yet it is a sibling of a parent and hence will not be found.

Try this:

$(this).closest('.tabs').find('.tabed_contents').removeClass('show');

Alternatively, you could go to .header and find the sibling .content.

$(this).closest('.header').siblings('.tabed_contents').removeClass('show');

To not hide all the .tabed_contents use this:

$(this).closest('.tabs').find('.tabed_contents').hide();

Fiddle

edited Oct 09 '13 at 13:44

Sergio

28,539
11
85
132

answered Oct 09 '13 at 10:12

Rory McCrossan

331,213
40
305
339

Okeis bruv, lemme upvote you bruv `:)` good to see you in long time! – Tats_innit Oct 09 '13 at 10:14
I say +1. OP has another markup in jsfiddle, I just updated. Maybe `.tabed_contents` instead of content. – Sergio Oct 09 '13 at 10:17
@RoryMcCrossan it removes all the show 'class' on the same page how do i prevent it.. http://jsfiddle.net/VkranthVivek/69z5B/44/ – Oct 09 '13 at 10:18
2

Added some things, hope its ok! – Sergio Oct 09 '13 at 13:44

score 0 · Answer 2 · answered Oct 09 '13 at 10:17

0

Try this :

$( this ).parent().parent().siblings(".content").removeClass('show');

answered Oct 09 '13 at 10:17

Abhishek Punj

289
2
6

how to find the siblings of parent using jquery

2 Answers2

Fiddle