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
