jQuery.closest(); traversing down the DOM not up
- by Alex
Afternoon peoples.
I am having a bit of a nightmare traversing a DOM tree properly. I have the following markup
<div class="node" id="first-wh">
<div class="content-heading has-tools">
<div class="tool-menu" style="position: relative">
<span class="menu-open stepper-down"></span>
<ul class="tool-menu-tools" style="display:none;">
<li><img src="/resources/includes/images/layout/tools-menu/edit22.png" /> Edit <input type="hidden" class="variables" value="edit,hobbies,text,/theurl" /></li>
<li>Menu 2</li>
<li>Menu 3</li>
</ul>
</div>
<h3>Employment History</h3></div>
<div class="content-body editable disabled">
<h3 class="dates">1st January 2010 - 10th June 2010</h3>
<h3>Company</h3>
<h4>Some Company</h4>
<h3>Job Title</h3>
<h4>IT Manager</h4>
<h3>Job Description</h3>
<p class="desc">I headed up the IT department for all things concerning IT and infrastructure</p>
<h3>Roles & Responsibilities</h3>
<p class="desc">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
</div>
<div class="content-body edit-node edit-node-hide">
<input class="variables" type="hidden" value="id,function-id" />
<h3 class="element-title">Employment Dates</h3>
<span class="label">From:</span> <input class="edit-mode date date-from" type="text" value="date" /> <span class="label">To:</span> <input class="edit-mode date date-to" type="text" value="date" />
<h3 class="element-title">Company</h3>
<input class="edit-mode" type="text" value="The company I worked for" />
<h3 class="element-title">Job Title</h3>
<input class="edit-mode" type="text" value="My job title" />
<h3 class="element-title">Job Description</h3>
<textarea class="edit-mode" type="text">The Job Title</textarea>
<h3 class="element-title">Roles & Responsibilities</h3>
<textarea class="edit-mode" type="text">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</textarea>
<div class="node-actions">
<input type="checkbox" class="checkdisable" value="This is a checkbox"/>This element is visible .<br />
<input type="submit" class="account-button save" value="Save" /> <input type="submit" class="account-button cancel" value="Cancel" /></div>
</div></div>
...
And I am trying to traverse from input.save at the bottom right the way up to div.node... This all works well with one copy of the markup but if I duplicate it (obvisouly changing the ID of the uppermost div.node and use jQuery.closest('div.node') for the upper of the div.node's it will return the element below it not the element above it (which is the right one). I've tried using parents() but that also has it's caveats. Is there some kind of contexyt that can be attached to closest to make it go up and not down? or is there a better way to do this.
jQuery code below.
$(".save").click(function(){
var element=$(this);
var enodes=element.parents('.edit-node').find('input.variables');
var variables=enodes.val();
var onode=element.closest('div.node').find('.editable');
var enode=element.closest('div.node').find('.edit-node-hide');
var vnode=element.closest('div.node-actions').find('input.checkdisable');
var isvis=(vnode.is(":checked")) ? onode.removeClass('disabled') : onode.addClass('disabled');
onode.slideDown(200);
enode.fadeOut(100);
});
Thanks in advance.
Alex
P.S It seems that stackoverflow has done something weird to the markup! - I just triple checked it and it is fine but for some reason it's concate'd it below
