jquery sau js pentru a obține datele de nod exacte pentru elementul/textul/imaginea formularului selectat în prezent într-o pagină Web

Vreau să obțin detaliile exacte ale elementului de pe o pagină web la care a fost făcut clic, folosind jquery.

Elementul respectiv poate fi un element de formă (ca o casetă de selectare, casetă de text, zonă de text etc.) sau o secțiune a textului (într-un paragraf sau div sau altul) sau o listă sau o imagine ...

Ce mi-am dat seama sunt următoarele:

$(function(){
  $('*')
    .bind('click', function(event) {
        //now obtain details of item that has been clicked on...    

    });
});

Acum, vreau detaliile exacte - vizitați div id/form id/paragraph #, adică toate detaliile pentru elementul respectiv. Cum obtin aceste date? Înțeleg că aceste date sunt disponibile în DOM, dar nu știu cum să le obțin în acest caz particular ...

0

3 răspunsuri

Probabil cel mai bun mod de a face pentru a utiliza proprietatea target a evenimentului. În mod implicit, acest lucru returnează un obiect non-jQuery, care nu este deosebit de util, însă ambalarea acestuia în $() rezolvă această problemă:

$(function() {
    $(document).bind('click', function(event) {
        var element = $(event.target);

        alert(element.height());   //Get height   
        alert(element.attr('id')); //Get ID attribute
       //...
    });
});

Dacă doriți să remediați metoda curentă, în interiorul manipulatorului click() , puteți accesa proprietățile acelui element folosind .attr() și prietenii:

$(function() {
    $('*').bind('click', function(event) {
        alert($(this).height());   //Get height   
        alert($(this).attr('id')); //Get ID attribute
       //...
    });
});

$(this) in the scope of the function references the element that was clicked. There is a list of functions that will return attributes here and here in the jQuery docs. $.attr('id') will return the element's ID, among other things, and $.data() will return data-* attributes.

Pentru a obține atribute ale elementelor părinte, pur și simplu utilizați $ (this) .parent() . De exemplu, pentru a obține codul de identificare al formularului care conține elementul clicat, utilizați $ (this) .closest ('form') .attr ('id'); Totul este relativ la elementul clic ( $ (this) ), astfel încât să puteți folosi doar funcții traversale DOM .

However, using $('*').bind() is incredibly inefficient; you're binding an event handler to every element on the page, when really you should delegate events with .on() (jQuery 1.7+):

$(function() {
    $('body').on('click', '*', function(event) {
        alert($(this).height());   //Get height   
        alert($(this).attr('id')); //Get ID attribute
       //...
    });
});

This approach only binds one event to <body> instead of an event to every element on the page.

0
adăugat
De asemenea, vreau ID-ul formularului părinte/div, de asemenea ... și ce dacă elementul se află într-un div imbrăcat (adică div în div)? Cum obtin aceste date complete? Mulțumiri...
adăugat autor Arvind, sursa
Vedeți editările mele.
adăugat autor Bojangles, sursa
folosind event.target este încă mult mai eficient decât căutarea fiecărui element din pagină pentru a aplica un clic
adăugat autor charlietfl, sursa

Utilizați țintă pentru evenimentul clic pe pagină

$(document).click(function(event){ 
  /* store native dom node*/
   var tgt=event.target;
  /* store jQuery object of dom node*/
   var $tgt=$(tgt);
    /* example element details*/
    var details={ id : tgt.id, height: $tgt.height(), tag : tgt.tagName}
    console.log( details)

})
0
adăugat

Uitați-vă la event.target , apoi puteți folosi metoda .parents() a lui jQuery pentru a vă uita la fiecare strămoș:

$(document).on('click', function(event) {
     var $t = $(event.target);//the element that was actually clicked
     var $p = $t.parents();   //the target's parents

     var $form = $p.filter('form').first();//the enclosing form, if it exists
});
0
adăugat
JavaScript, România - Moldova
JavaScript, România - Moldova
328 participanți

Comunitatea Română JavaScript: github.com/js-ro Pentru confort, opriți notificările. Parteneri: @node_ro, @php_ro, @python_ro, @seo_ro, @RomaniaGroup, @ai_ro, @Grupuri_IT Offtop: @holywars_ro Joburi: @js_jobs_ro Sponsored with ❤️ by ciupacabra.com