Getting attributes of current element

[csdude55]

Let's say I do something like this:

<div id="foo">
 <script>showInfo();</script>
</div>

I want to find the ID of the current element, and I don't know the ID or any other selectors ahead of time... just that it's the DIV immediately preceding the SCRIPT.

I could change it to this, if it's easier:

<div id="foo"></div>
<script>showInfo();</script>

I've tried everything I can think of, but nothing returns the ID unless I know some other way to find it.

In practice, this would actually be running in an infinite scroll so the ID would be variable, and I can't run it at the bottom of the page because new ones would be added after the page is done loading. I would also use it for other normal sections that aren't in infinite scroll, and while I COULD send the ID name in those instances, it would be easier if there was an automated way to just know it.

[NickMNS]

This stack overflow thread provides various ways of selecting the script node, choose the one that best suits your needs.
[stackoverflow.com...]

Then for example:

var myScript = document.currentScript;
var fooDiv = myScript.parentNode;
console.log(fooDiv.id); //should returns foo

[csdude55]

currentScript would be perfect, if not for stupid IE :'-(

It looks like this will work, though:

var scripts = document.getElementsByTagName('script'),
 info = scripts[scripts.length - 1].parentNode.id;

I could use var scripts = $('script');, too, but I suspect it would be a bit slower than pure JS so there's no real advantage to it.

[csdude55]

For future readers, this is marginally longer, but I think it will process faster for non-IE:

var info = document.currentScript || $('script')[$('script').length - 1];
info = info.parentNode.id;

This checks to see if document.currentScript is true, which it should be for most non-IE browsers:

[caniuse.com...]

If it fails then it falls back to jQuery's $('script')[$('script').length - 1]. Then info adds .parentNode.id to either of them to get the ID of the parent element.

I can't think of any reason to check if (info) { ... } after the first line; this is in Javascript, so to get here one of the two options has to be true.

I chose to do it in a single variable (info) because I never used the scripts variable again, and I think a second unnecessary variable would be slightly slower to process.

It can also be done without jQuery, it's just a tad longer:

var info = document.currentScript ||
 document.getElementsByTagName('script')[document.getElementsByTagName('script').length - 1];

info = info.parentNode.id;

In my case, IE is a less popular browser with my users so I chose a smaller filesize for everyone over the faster pure JS for IE. YMMV, of course.

[Dimitri]

this would actually be running in an infinite scroll

Be careful, depending on how you are injecting the new elements into the page, your <script> might not be executed.

[csdude55]

Yeah, it was extremely complicated! I'm using a jQuery module called ScrollMagic, and it's set up to run a callback function after the insertion. I learned the hard way that Ajax fragments will squash any Javascript, so it all has to be done with callbacks... much more complicated than I originally anticipated!