Getting the current script DOM object in a (jquery) ajax request

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开发者_Go百科="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.

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.

If you can give your <script/> block an Id you could easily call prev() to get the previous element.

<script type="text/javascript" id="s2">
    $(document).ready(function(){
      $("#s2").prev().append("<h1>Prev Element</h2>");
    })
</script>

Example on jsfiddle.

You will need to get a way to reference the script tag immediately after the "grid" div. As @Mark stated, the easiest way to do this is by giving the script tag a unique id. If this is beyond your control, but you do have control of the script contents (implicit by the fact that you are creating it) you can do something like this:

var UniqueVariableName;
var scripts = document.getElementsByTagName('script');
var thisScript = null;
for(var i = 0; i < scripts.length; i++){
    var script = $(scripts[i]);
    if(script.text().indexOf('UniqueVariableName') >= 0){
        thisScript = script;
        break;
    }
}
if(thisScript){
    thisScript.prev().append("<h1>Prev Element</h2>");
}

Hack? Yes. Does it Work? Also, yes.

Here's something that works in FF, Chrome and IE 8, untried anywhere else. It looks at the element before the last element on the page (which is the script being parsed), stores it locally (with a self calling function) so the load handler can use it.

http://jsfiddle.net/MtQ5R/2/

<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>(function(){
    var nodes = document.body.childNodes;
    var prevSibling = nodes[nodes.length - 2];

    $(document).ready(function(){
        console.log( prevSibling );
    })

})();</script>

Having said that. I still have to mention that you're tightly coupling the behavior (JS) and HTML, by putting them into the same file which kind of goes against the web flow of separating them. Also, I don't know how you'd expect this to work with an AJAX request since you're not just adding it to the HTML as it's being rendered. In that case, it would be very easy to get a reference to the html you just inserted though.