Avatar of Rouchie
Rouchie
Flag 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.
jQueryJavaScript

Avatar of undefined
Last Comment
Rouchie

8/22/2022 - Mon
leakim971

Could you provide a bit of tables?
leakim971

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/
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...!
Experts Exchange is like having an extremely knowledgeable team sitting and waiting for your call. Couldn't do my job half as well as I do without it!
James Murphy
leakim971

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

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
leakim971

$("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")
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
Rouchie

ASKER
That's great - thanks for your help.