Tutorial :JQuery - “Selector” for current position in document



Question:

Is there a selector or function in JQuery that allows to select the "current position in the document"?

For example if I use

<script>document.write("test");</script>  

the output will be placed in the HTML document at the "position" where this "code" stands. But jQuery always requires a special selector. Of course I could be using a "marker div" with a unique selector, but is it also possible to insert HTML with JQuery right at the place where where the JQuery expression stands?

I tried

<script>$(this).after("test");</script>  

but this it's not working. Help would be very much appreciated how this can be solved. Thank you!

EDIT:

Regarding the question below: The Idea is not to directly print out something with document.writeln (it was more meant as an example) but to determine the current "position" in the document with jQuery (and than starting from that position on with "navigation/traversal" of elements by using the jQuery functionality.

Maybe this can be called a "relative traversal of elements starting from the current position on in the DOM Tree"?

<div>Position1</div>  <div>Position2</div>  <script> HOW TO GET THIS POSITION WITH JQUERY (SEE NOTES BELOW) TO FURTHER NAVIGATE FROM HERE ON (RELATIVELY) TO THE PREVIOUS OR NEXT ELEMENT</script>  <div>Position3</div>  <div>Position4</div>  

NOTES: The script tag with the jQuery statements will be inserted dynamically in the document and what I am interested in is, to be able to navigate from this position on in the document with jQuery. In the script Tag I might call something like "WRAP THE NEXT HTML ELEMENT WITH A TAG VIA JQUERY" or "GIVE ME THE NEXT HTML ELEMENTS VALUE-ATTRIBUTE". As stated above it is possible to insert a "marker div" to determine the position but the question is, if JQuery is "autonomically" able to determine it's position in the DOM-Tree (to start navigation in a "relative manner" from there on).


Solution:1

$("script:last") seems to work for all modern browsers (except IE)

<html>  <head>    <title>test</title>    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.5.min.js"></script>  </head>  <body>    <script type="text/javascript">      document.write($("script:last").text());    </script>    <script type="text/javascript">      document.write("---");      document.write($("script:last").text());    </script>  </body>  


Solution:2

If I understand that right, you want a feature doing exactly the same as document.write, I don't understand why you want that and not just use document.write then?


Solution:3

I do not know a solution using jQuery, but you can find out the DOM node in the current caret position in most browsers quite easily using:

  • document.selection.createRange() in IE (see MSDN)
  • window.getSelection().focusNode in most other browsers (Gecko et al, see MDC Article)

Good luck!


Solution:4

it's easy: just give an id attribute to your inline script tag:

  <script id="hello">alert("hello");</script>  

then you can just do :

$('script#hello').after('<span style="color:red">this is my new content</span>');  

UPDATE:

since you don't want to modify the html markup, then the only alternative is to access your script tags according to their order of appearance in the code.

  $('script').each(function(index){  // "index" gives you the instance number, which you could use, for example inside a switch case.  switch(index){  case '1':      $(this).after('<span style="color:red">i am number 1</span>');  break;    case '2':      $(this).after('<span style="color:red">i am number 2</span>');  break;    default:      $(this).after('<span style="color:red">i am number '+index+'</span>');  break;  }      });  

or you can access a specific one via .eq(index) :

$('script').eq(2).after('hello world');    // this is for the third script tag, starting from the top of the document.  

Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Previous
Next Post »