[dx] Posted August 3, 2012 Share Posted August 3, 2012 Hi, I stuck with this script: $('.edit_user_pages').click(function() { var n = $('.edit_user_pages').index($(this)); $(this).css('background', '#fafafa').siblings().css('background', '#fdfdfd'); $('.edit_user_list').animate({opacity:0}, 300, 'linear', function() { $('.edit_user_list').eq(n).css({display: 'block'}).siblings().css({display: 'none'}); }).animate({opacity:1}, 500);}); So let me explain. I have pagination numbers with class edit_user_pages, also I have tables with class edit_user_list, so when I click on first pagination number it checks index and shows first user_list. So it works fine.. Also, above those table(s) I have some text, something like select user.. etc.And below table(s) are pagination number. So this script works as I want, table is changed etc., except text (above) and pagination (below) disapears. Those elements doesn't have same class name. If I try this: $('.edit_user_list').eq(n).css({display: 'block'}); elements doesn't hide, so error is there.. Regards Link to comment Share on other sites More sharing options...
justsomeguy Posted August 3, 2012 Share Posted August 3, 2012 You're telling it to hide the siblings of the table, and apparently you have it structured so that the other things that are being hidden are siblings. Link to comment Share on other sites More sharing options...
[dx] Posted August 3, 2012 Author Share Posted August 3, 2012 Yes, but only siblings for .edit_user_list Link to comment Share on other sites More sharing options...
[dx] Posted August 3, 2012 Author Share Posted August 3, 2012 (edited) This is my HTML script: <div class="member_content" style="display: block; "><h2>Edit user</h2><span class="darkred">* Click on user you want edit</span> <table cellpadding="0px" cellspacing="0px" class="edit_user_list" style="border: 1px solid #CCC; display: block">...</table><table cellpadding="0px" cellspacing="0px" class="edit_user_list" style="border: 1px solid #CCC; display: none">...</table><table cellpadding="0px" cellspacing="0px" class="edit_user_list" style="border: 1px solid #CCC; display: none">...</table> <span class="edit_user_pages" style="border: 1px solid #CCC; padding: 3px; margin: 2px">1</span><span class="edit_user_pages" style="border: 1px solid #CCC; padding: 3px; margin: 2px">2</span><span class="edit_user_pages" style="border: 1px solid #CCC; padding: 3px; margin: 2px">3</span></div> I've just removed content of tables(s) So when I click on pagination below, those spans, and h2, and span above hides. Edited August 3, 2012 by Haris S Link to comment Share on other sites More sharing options...
justsomeguy Posted August 3, 2012 Share Posted August 3, 2012 Right. Those are the siblings, and you're telling it to hide them. Link to comment Share on other sites More sharing options...
dsonesuk Posted August 3, 2012 Share Posted August 3, 2012 you need to target ALL edit_user_list but NOT the one whose index equals the pagination that was selected $('.edit_user_list').css({display: 'block'}).not($('.edit_user_list').eq(n)).css({display: 'none'}); 1 Link to comment Share on other sites More sharing options...
[dx] Posted August 4, 2012 Author Share Posted August 4, 2012 I guess I have miss understand of siblings meaning.. :S Link to comment Share on other sites More sharing options...
[dx] Posted August 4, 2012 Author Share Posted August 4, 2012 So siblings are elements on same parent/child level in elements hierarchy? Link to comment Share on other sites More sharing options...
dsonesuk Posted August 4, 2012 Share Posted August 4, 2012 siblings are elements that directly follow the previous element at the same level <div id="wrap1"> <div></div> <a href="#"></a> <h1></h1></div> <div id="wrap2"> <div></div> <a href="#"></a> <h1></h1></div> All child elements in wrap1 and wrap2 are siblings, as they are at the same level and follow each other, wrap1 and wrap2 are siblings for the same reason. Link to comment Share on other sites More sharing options...
[dx] Posted August 4, 2012 Author Share Posted August 4, 2012 Ah, understand now.. I thought that only elements with same selector are siblings.. Link to comment Share on other sites More sharing options...
[dx] Posted October 11, 2012 Author Share Posted October 11, 2012 Hi, Let me back to this topic again. I understood now what means siblings, but what I'm interested in is if there's posibility to get only siblings as children of some element. Like in example: <div id="num1"> <div id="num11"> <div id="num12"> <div id="num13"></div><div id="num2"> <div id="num21"> <div id="num22"> <div id="num23"></div> So, siblings are numX in one group, and numXX in other group. So I need get ony siblings from one element, so like: $('#num11').siblings_somehow to get only num12, and num13. Regards Link to comment Share on other sites More sharing options...
dsonesuk Posted October 11, 2012 Share Posted October 11, 2012 use .nextAll() or nextUntil() Link to comment Share on other sites More sharing options...
ShadowMage Posted October 11, 2012 Share Posted October 11, 2012 Have you checked to see which elements are returned if you do $('#num11).siblings()?It should return only #num12 and #num13. #num21, 22, 23 are not siblings of #num11 because they have a different parent. Link to comment Share on other sites More sharing options...
[dx] Posted October 13, 2012 Author Share Posted October 13, 2012 Faal Vokundovah check post #9 in this topic. Link to comment Share on other sites More sharing options...
ShadowMage Posted October 15, 2012 Share Posted October 15, 2012 I know what siblings are. Have you verified that what dsonesuk said is true? I think dsonesuk's statements in post 9 are either misleading or inaccurate. Siblings must have the same parent. In your example, the elements #num11, #num12, and #num13 have a different parent element than the elements #num21, #num22, and #num23 so they are not siblings of each other. Thus, retrieving the siblings for #num11 should return only #num12 and #num13 because #num21, 22, and 23 are not siblings of #num11. 1 Link to comment Share on other sites More sharing options...
thescientist Posted October 15, 2012 Share Posted October 15, 2012 seriously, how hard is to just run the code and log the response to close the case? Link to comment Share on other sites More sharing options...
dsonesuk Posted October 15, 2012 Share Posted October 15, 2012 mmm i suppose it could be miss read as such, the siblings in wrap1 and wrap2 are unrelated as they have different parents, you access these just by selecting parent then children, or child then sibling, all of which will only those under the parent element. there many different ways of targetting child siblings or specific child siblings <div id="wrap1"><div>A1</div><a href="#">B1</a><h1>C1</h1></div><div id="wrap2"><div>A2</div><h1>B2</h2><div>C2</div></div><div id="wrap3"><div>A3</div><h1>B3</h2><div>C3</div></div><div id="wrap4"><div id="num11">A4</div><h1 id="num12">B4</h2><div id="num13">C4</div></div><div id="wrap5"><div id="num14">A5</div><p id="num15">B5</p><p id="num16">C5</p><div id="num17">D5</div><div id="num18">E5</div><div id="num19">F5</div></div> $(function(){$('#wrap1').children().not("a").css({'color': 'red'});$('#wrap2').children().siblings("div").css({'color': 'red'});$('#wrap3 div').css({'color': 'red'});$('#wrap4').children('#num11').nextAll().css({'color': 'red'});$('#wrap5').children('div:gt(0)').not($('#wrap5').children('div:gt(2)')).css({'color': 'red'});}); Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now