Question

I have a html component that includes some javascript.

The component is a file in a template engine, so it can be used

• in the initial rendering of the whole html page
• as stand-alone html rendered through an ajax request

The javascript should be applied to an object in the template, i.e. :

<div class="grid" >
  <div class="item" id="item_13">
      This is item 13
  </div>
  <div class="item" id="item_14">
      This is item 14
  </div>
</div>
<script type="text/javascript">
    $(document).ready(function(){
       $(HOW_DO_I_GET_PREVIOUS_ELEMENT???).someEffect(params)
    })
</script>

I’ve checked this similar question but the best answers seem to rely on the current script being the last one in the ‘scripts’ variable as the next ones are not loaded yet. If I append the html and js with an ajax request, it will not be the case.

To be 100% clear : the question is about getting the previous object WITHOUT reference to any specific attribute : no unique id for the tag, no random id as there is theoretically always a chance it will show up twice, no unique class attribute,as exactly the same component could be displayed in another part of the HTML document.

Answer 1

Simple solution involving a two step process:

1) find out which element your script tag is

2) find the previous sibling of that element

in code:

<div id="grid">
    <!-- ... -->
</div>
<script type="text/javascript">
    var scripts = document.getElementsByTagName("script");
    var current = scripts[scripts.length-1];
    var previousElement = current.previousSibling;
    // there may be whitespace text nodes that should be ignored
    while(previousElement!==null && previousElement.nodeType===3) {
        previousElement = previousElement.previousSibling; }
    if(previousElement!==null) {
        // previousElement is <div id="grid"> in this case
        $(document).ready(function(){
            $(previousElement).someEffect(params);
        });
    }
</script>

Is this good web programming? No. You should know which elements should have effects applied to them based on what you’re generating. If you have a div with an id, that id is unique, and your generator can tell that if it generates that div, it will also have to generate the js that sets up the jQuery effect for it.

But let’s ignore that; does it work? Like a charm.