Possible to streamline a function for reading DOM indexes

Rouchie
Rouchie used Ask the Experts™
on
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.
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
leakim971Multitechnician
Top Expert 2014

Commented:
Could you provide a bit of tables?
leakim971Multitechnician
Top Expert 2014

Commented:
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/
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...!
Starting with Angular 5

Learn the essential features and functions of the popular JavaScript framework for building mobile, desktop and web applications.

leakim971Multitechnician
Top Expert 2014

Commented:
>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
>> 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...!
Multitechnician
Top Expert 2014
Commented:
>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?

Yes that's right. The main thing is all the table must be at the same "level" in the same container (here a the body tag, but it may be a div for example). So all the table but not the table in the table for example.

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

>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?

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



leakim971Multitechnician
Top Expert 2014

Commented:
$("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")
That's great - thanks for your help.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial