2

The classic way to access an element would be:

<div id="myId"></div>
<script type="text/javascript">
    $(document).ready(function(){
        $('#myId').something();
    });
</script>

Let alone the many times when there is no clear id to use to access an element, where we end up using the class attribute's value(s), but we can never be sure if there is more than just one such element in the page.

After writing this or similar code thousands of times, i got to wonder:

Is there a way to use context to directly reference a HTML element?

I'm thinking of something like this:

<div>
    <script type="text/javascript">
        $(document).ready(function(){
            $.getContext().something(); // accessing the encapsulating div
        });
    </script>
</div>

Or anything similar?

SquareCat
  • 5,699
  • 9
  • 41
  • 75
  • By context you mean text ? – Zvezdas1989 Nov 15 '17 at 12:09
  • 1
    By context i mean context. – SquareCat Nov 15 '17 at 12:10
  • See [there](https://stackoverflow.com/questions/403967/how-may-i-reference-the-script-tag-that-loaded-the-currently-executing-script) then just get its parent BUT you cannot use it from document ready handler, just at time it is processed – A. Wolff Nov 15 '17 at 12:12
  • I'm not sure what the advantage would be, you're still searching for something using the DOM. – Ryan Searle Nov 15 '17 at 12:12
  • Can you give an example of what you mean by 'context' – Rob Anthony Nov 15 '17 at 12:12
  • 1
    You could achieve this behaviour if you really want, but this is not worth it. Organize your code properly, write selectors wisely and you will not have any problems with contexts. In addition with good frameworks and methodologies (react, angular, vue, etc.) you get rid of the problem entirely since DOM jQuery-style manupulations just are not in play anymore. – dfsq Nov 15 '17 at 12:13
  • How would it be achieved? Looking for answers. I'm not really having any particular problems with the classic approach, and it's not like using another approach would set a milestone in better coding. Nevertheless i look for a solution, be it only to understand how it would be done. – SquareCat Nov 15 '17 at 12:16
  • So what you want is something like that?! (but doesn't work on older browsers and all IEs): https://jsfiddle.net/0yft8xzc/ – A. Wolff Nov 15 '17 at 12:20
  • @A.Wolff – this looks promising! Perhaps you want to post this as an answer? – SquareCat Nov 15 '17 at 12:22
  • @SquareCat This looks like a dupe of [this question](https://stackoverflow.com/questions/403967/how-may-i-reference-the-script-tag-that-loaded-the-currently-executing-script) to me – A. Wolff Nov 15 '17 at 12:24
  • Not sure about that. I am not looking to reference the script tag. I want to reference any element in the page i embed the script tag in. – SquareCat Nov 15 '17 at 12:25
  • Your question could be legit but i guess this is more a XY problem. How do you embed the script tag? Is that following any user interaction like for a WYSIWYG editor? Couldn't you just give ID to this specific script tag? – A. Wolff Nov 15 '17 at 12:30
  • Perhaps it's a bit more of a meta-question, as this is not so much about practicability as it is about curiosity and better understanding. I am looking for a way to get around using selectors to access elements when the context is clear. – SquareCat Nov 15 '17 at 12:32

1 Answers1

0

You can pass an optional second context parameter to your jQuery(selector, context) where context is:

A DOM Element, Document, or jQuery to use as context

For instance, in your example you could pass this to your selector to reference the document context:

$(document).ready(function(){
    $('#myId', this).something();
});

The example is contrived because of the ID selector though, and since document is the default context. A better example would be something like:

$('div.foo').click(function() {
    $('span', this).addClass('bar');
});
Tomanow
  • 7,247
  • 3
  • 24
  • 52
  • I was unaware that `.context` actually existed. Funny. Anyway, while i am grateful for the contribution, this is not what i was looking for. Here i still require the element's id (or class or whatever) to reference it. – SquareCat Nov 15 '17 at 12:17
  • 1
    Question is maybe unclear but this has nothing to do with jQuery context option – A. Wolff Nov 15 '17 at 12:18
  • I see. The original edit had `.context()` function which led me to the deprecated jQuery function. – Tomanow Nov 15 '17 at 12:20
  • Sorry about that – i chose `.context` just as an example, so i edited the question to make things more clear. – SquareCat Nov 15 '17 at 12:22