Link to home
Create AccountLog in
Avatar of Rouchie
RouchieFlag for United Kingdom of Great Britain and Northern Ireland

asked on

Possible to streamline a function for reading DOM indexes

My page has multiple tables each with many text input fields.  In the first row of each table is a DELETE link, which, when clicked, clears the values of all text inputs from that point onwards (not text inputs in earlier tables).  It works really well, but I am not sure if it is a waste of resources:

<a onclick="ClearFields('txt_someID', this); return false;" href="#">Delete</a>

Open in new window

function ClearFields(idToClear, startCtrl){
	var parentTable = $(startCtrl).closest('table'); // find the parent table
	var startIndex = $(parentTable).index('*');  // find the DOM index of the parent table
	$("input[type='text'][id$='" + idToClear  + "']").each(function(){ // for each text input on the entire page
		if ($(this).index('*') > startIndex) { // if the text input DOM index is greater than the parent table
			$(this).val(''); // clear the value
		}
	});
}

Open in new window


My question relates to the fact that if my page had 500 text fields, and the Delete link was clicked next to the 200th text box, the JQuery loop would unecessarily have to check the index value of the previous 200 text fields BEFORE it started to clear the remaining fields.  It seems a real waste of resources.  Is there a way to streamline this to trim the array of elements to start at the desired index (startIndex)?  I've looked at :gt() and slice() but these only affect the returned array after the search takes place.
Avatar of leakim971
leakim971
Flag of Guadeloupe image

Could you provide a bit of tables?
Try this :
function ClearFields(idToClear, startCtrl){
	var parentTable = $(startCtrl).closest('table'); // find the parent table
        var tables = parentTable.parent().children("table");
        var startIndex = tables.index(parentTable);
        $("input[type='text'][id$='" + idToClear  + "']", tables.filter(":gt(" + startIndex + "),:eq(" + startIndex + ")")).val("");
}

Open in new window


Test page (a bit different) :http://jsfiddle.net/bbBjS/
Avatar of Rouchie

ASKER

Hi leakim971

I think you're on the money here.  Could you please verify that I've followed your example correctly...

var tables = parentTable.parent().children("table");

Open in new window

I assume that this (in your example on JSFiddle) identifies parent() as being the <body> tag, from which children("table") then finds all the tables?  

var startIndex = tables.index(parentTable);

Open in new window

... and this part finds the index of the link's parent table within the table array found above?

$("input[type='text'][id$='" + idToClear  + "']", tables.filter(":gt(" + startIndex + "),:eq(" + startIndex + ")")).val("");

Open in new window

This is the part I'm struggling to translate!  I assume that we then search for all the text inputs, but only within tables that have an index greater than the table index above, or equal to the table index above?  I was not aware that you could do multiple searches (separating them with a comma), so was struggling to read the logic...!
>Could you please verify that I've followed your example correctly...

The JSFiddle did not work for you? By click on the delete link I'm able to delete the input#idToClear of the current table (where the link is embeded) and the all others in the "next" table in the DOM
Avatar of Rouchie

ASKER

>> The JSFiddle did not work for you?

Hi yes it did, thanks.  My questions however were so that I could understand what was happening in the logic within the JSFiddle page.  Once I am comfortable with that then I can easily adapt this for future use, rather than keep asking here if the design of my page changes in the future...!
ASKER CERTIFIED SOLUTION
Avatar of leakim971
leakim971
Flag of Guadeloupe image

Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
$("selector1", "selector2")
in selector2 find this selector1

$("selector1, selector2")
find all objects for selector1 and selector

$("selector1", "selector2") same as $("selector2").find("selector1")
$("selector1, selector2") same as $("selector1").add("selector2")
Avatar of Rouchie

ASKER

That's great - thanks for your help.