Die Umwandlung JavaScript 'diese' jQuery ' $()'

Bitte haben Sie einen Blick auf den folgenden code:

<HTML>
    <HEAD>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

        <SCRIPT type="text/javascript">
            function test(target) {     alert(target.nodeName); }
        </SCRIPT>
    </HEAD>

    <BODY>
        <DIV>
            <ul>
                <li onclick="test(this)">This is fair</li>
                <li onclick="test(this)">No its not</li>
                <li onclick="test(this)">Why not</li>
                <li onclick="test(this)">Becoz...</li>
            </ul>
        </DIV>
    </BODY>
</HTML>

Die Funktion test erhält Ziel - (li) - Knoten als argument.

Nun, kann ich das irgendwie konvertieren Sie diese variable auf jQuery $(this) oder $(e.target) oder jede andere jQuery-variable zu, so dass ich könnte durchqueren Sie das Dokument mithilfe der jQuery-Weg?

Ja, genau so, wie Sie vorschlagen: $(this) oder $(e.target)
Gut, in diesem Fall wäre es $(target). übergeben Sie DOM-Elemente mit jQuery. So wie es da steht, im inneren test, this beziehen sich auf window also ich glaube nicht, dass es ist, nützlich zu übergeben es an jQuery. Man kann natürlich auch passieren das jQuery-Objekt direkt: test($(this)). Ich würde auch vorschlagen, binden Sie die event-Handler mit jQuery statt mit inline-event-Handler.

InformationsquelleAutor Mayank | 2012-01-10

  1. 18

    Konvertieren DOM-element auf jQuery-Objekt

    Zu konvertieren DOM-element auf jQuery-Objekt Sie Folgendes tun:

    var jquery_object = jQuery(dom_element);

    So, in deinem Beispiel wird es $(this) oder $(event.target) - je nachdem, ob Sie aktuelle element oder das element, das tatsächlich feuerte der Veranstaltung (in Ihrem Fall, Sie sind die gleichen, es sei denn Ereignis wird ausgelöst, die von einigen untergeordneten Elementen).

    Umwandlung jQuery object zu DOM-element

    Zu konvertieren jQuery object zu DOM-element, können Sie einfach behandeln jQuery Objekt als array oder verwenden Sie die get() Methode so:

    var dom_element = jquery_object[0];

    oder

    var dom_element = jquery_object.get(0);

    Oben zurück erste Objekt in der jQuery-Objekt - wenn es nur einer ist, sollte es keine Probleme geben (wenn es mehrere sind, ändern Sie einfach 0 in anderen index zu bekommen entsprechende element, oder einfach weglassen, das argument für get() abrufen alle Elemente als array).

    Ihren code geändert jQuery

    Dein code könnte so Aussehen (wenn Sie darauf bestehen, mit hart-zu-erhalten-Ereignis-Attribute):

    <HTML>
<HEAD>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

<SCRIPT type="text/javascript">
    function test(target) {     alert(target.get(0).nodeName); }
</SCRIPT>

</HEAD>
<BODY>

<DIV>
    <ul>
        <li onclick="test($(this))">This is fair</li>
        <li onclick="test($(this))">No its not</li>
        <li onclick="test($(this))">Why not</li>
        <li onclick="test($(this))">Becoz...</li>
    </ul> </DIV>

</BODY>

    außer in diesem Fall mit Hilfe von jQuery ist völlig nutzlos und Sie können nur arbeiten direkt auf DOM-Elemente, die Konvertierung von jQuery bei Bedarf 🙂

    Ihre Lösung geändert, um das binden von Ereignissen, die außerhalb <body>

    Ihren code mit jQuery für die Bindung an die Ereignisse in jQuery 1.7+ könnte wie folgt Aussehen:

    <HTML>
<HEAD>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

<SCRIPT type="text/javascript">
    $(function(){
        $('li').on('click', function(event){
            alert(event.target.nodeName);
        });
    });
</SCRIPT>

</HEAD>
<BODY>

<DIV>
    <ul>
        <li>This is fair</li>
        <li>No its not</li>
        <li>Why not</li>
        <li>Becoz...</li>
    </ul> </DIV>

</BODY>

    Siehe die oben in Aktion hier: jsfiddle.net/tadeck/2PqPP/

    Genial. Vielen Dank 🙂 script src=http://ajax... auch behoben werden müssen von meiner Seite
    Danke! 🙂 Warum du denkst, dass <script src="//ajax... sollte geändert werden? Wenn Sie beginnen Ihre URL mit // der browser voran, es mit der aktuellen URL, wie "http:" oder "https:".
    ich testete dieses lokal, ich meine, durch das erstellen und die HTML-Datei und öffnen Sie Sie im browser ohne server läuft. Kann das ist der Grund, warum ich brauchen, um es zu starten mit http. Es war, zeigt mir die Fehler $ not defined. Nachdem ich Hinzugefügt http hat es geklappt.
    Es funktioniert nicht lokal, wahrscheinlich, weil Sie verwendet werden file://... statt zB. http://localhost/... - was im Falle des links " URLs beginnend mit // macht den großen Unterschied. "//" wenn am Anfang der link, behandelt die URL die gleiche Protokoll als Teil der aktuellen Anforderung, so ist dies völlig in Ordnung. Verwenden Sie einfach http:// für lokale Anfragen (Sie können das web durchsuchen und Informationen zur Einrichtung der server, auf localhost, das ist anderes Thema). Viel Glück!

    InformationsquelleAutor Tadeck

  2. 2

    Versuchen Sie dies:

    $(document).ready(function(){
   $('ul li').click(function(){
       alert($(this).index());
   });
});

    Wenn Sie Lesen wollen über alle Elemente in der Liste, die Sie verwenden können:

    $(document).ready(function(){
    $('ul li').each(function(){
        alert($(this).index());
    });
)};

    Hoffe, das hilft.

    InformationsquelleAutor Sagar Patil

  3. 0

    Versuchen, diese

    <HTML>
<HEAD>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

<SCRIPT type="text/javascript">        
    $(function(){
    $('ul li').click(function(){
         alert($(this).html());
     })
    })

</SCRIPT>

</HEAD>
<BODY>

<DIV>
    <ul>
        <li>This is fair</li>
        <li>No its not</li>
        <li>Why not</li>
        <li>Becoz...</li>
    </ul> 
</DIV>

</BODY>

    InformationsquelleAutor Mandeep Pasbola

Schreibe einen Kommentar