Jump to content

Bug or ...?


[dx]

Recommended Posts

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

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 by Haris S
Link to comment
Share on other sites

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

  • 2 months later...

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

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.

  • Like 1
Link to comment
Share on other sites

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...