Created
October 14, 2013 00:21
-
-
Save stubbornella/6968898 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta name="description" content="[add your bin description]" /> | |
<meta charset=utf-8 /> | |
<title>JS Bin</title> | |
</head> | |
<body> | |
<h1>Using onclick</h1> | |
<div class="text">text to be replaced</div> | |
<ul> | |
<li>foo - clicks here should not alert</li> | |
<li>bar</li> | |
<li>baz</li> | |
</ul> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* tests: | |
* | |
* 1. click on children of .text should alert their index - PASS | |
* 2. click on other elements should not - PASS | |
* 3. if two nodes have the same content, a click on the latter should not return the index of the former - PASS | |
*/ | |
// how to make it execute after document is loaded? | |
var content = "<div>a</div><div>e</div><div>t</div><div>7</div><div>1</div><div>a</div>", | |
textNode = document.getElementsByClassName("text")[0]; // what if the server returned json, or content was an array. | |
textNode.innerHTML = content; | |
textNode.onclick = findIndex; | |
if (textNodes.captureEvents) textNodes.captureEvents(Event.CLICK); | |
function findIndex(e) { // does js have an api for the index? | |
if (!e) var e = window.event; | |
alert(Array.prototype.indexOf.call( e.target.parentNode.children, e.target )); | |
} |
So, the way I've already written it is super fast. Even with 100,000 nodes, the alert is instantaneous. With a million nodes, the browser can't handle even scrolling, so I can't see optimizing for that situation.
@goonieiam - what do you think?
@jared-wyles said I should focus on these things next:
- maintainability, and
- what if the div wrappers for the content could be any element, a span for example, or li
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Success criteria: the new method needs to be faster than simply searching through all the nodes with a reasonable academic algorithm.
My initial plan, I will do a combination of these points.
How to find out which nodes are visible?
I don't want to check every node, that would be even slower than searching the whole list. Figure out at how many nodes (x) searching becomes slower than the user is willing to tolerate (~200ms, but again, gather data). Then check visibility at those increments. There are three cases the solution must satisfy: