meilleure façon de référencer un élément avec jquery?

Question

Je veux savoir comment puis-je sauvegarder une référence à un objet (ceci) en utilisant jquery. ce que je veux dire par exemple je veux quand mon utilisateur a cliqué sur n'importe quel élément dans sa page, j'envoie la référence d'objet à mon serveur Web, et l'utilisateur suivant appelle le serveur, j'envoie le refernce sauvé au navigateur, et fais d'autre substance Comme fadeIn() ... jusqu'à présent, j'ai essayé d'utiliser JSON.stringify (this) et JSON.stringify ($ (this)), mais les deux ne semblent pas fonctionner. J'ai également essayé de sauver l'identification et la classe elemen't, ainsi l'utilisateur de prochaine fois les appelle je pourrais juste employer des sélecteurs, mais puisque je veux employer le manuscrit sur n'importe quel site Web, les choses pourraient ne pas être l'idéal pour employer des sélecteurs. est-il possible d'obtenir la référence exacte à un élément et de l'envoyer au serveur?

Answer 1

Nope, des références à des éléments DOM travaillent uniquement dans une instance DOM (même si vous rajoutez la même page, les références ne fonctionnent plus). Vous devrez utiliser des sélecteurs. Si vous êtes sûr que la structure de la page ne change pas, la meilleure façon d'obtenir le même élément est le suivant:

// Get numeric index of element on page. 
var index = $('*').index(this); 

// Restore element. 
var $this = $('*').eq(index); 

Vous pouvez le rendre plus sûr du changement de page à l'aide des ID et classes si possible.

Jetez un oeil à ce script: http://paste.blixt.org/297640

Voici une version simplifiée de ce qui ne repose pas sur les classes/ID:

jQuery.fn.getPath = function() { 
    if (this.length != 1) throw 'Requires one element.'; 

    var path, node = this; 
    while (node.length) { 
     var realNode = node[0], name = realNode.localName; 
     if (!name) break; 
     name = name.toLowerCase(); 

     var parent = node.parent(); 

     var siblings = parent.children(name); 
     if (siblings.length > 1) { 
      name += ':eq(' + siblings.index(realNode) + ')'; 
     } 

     path = name + (path ? '>' + path : ''); 
     node = parent; 
    } 

    return path; 
}; 

Utilisé comme ceci:

// Get selector for element. 
var path = $(this).getPath(); 

// Get element using selector. 
var $this = $(path); 

Answer 2

Bien que je ne pense pas qu'il existe un moyen de faire exactement ce que vous demandez, je suggère de placer un ID sur les éléments que vous souhaitez enregistrer de cette manière. Vous pouvez ensuite enregistrer et récupérer plus tard cet ID à partir du serveur en utilisant ajax.

Votre sélection ressemblerait à quelque chose comme ceci:

var saveId = $(this).attr('id'); 

Je ne crois pas que cela fonctionnera sur « un site Web » comme vous l'avez indiqué, mais si vous contrôlez le site, vous pouvez vous assurer que tous les éléments que vous souhaitez enregistrer ont un ID et étant donné que tous les ID sur une page doivent être uniques, vous devriez être en mesure d'accomplir ceci - dans cette contrainte.

Answer 3

Vous pouvez enregistrer le champ selector afin de pouvoir le sélectionner ultérieurement. Comme ceci:

var Elements = $('body').find('.container').find('div.controls'); // Just some complex selection 
... 
var ToSave = Elements.selector; 
AJAXSave('Elements', ToSave); 
// ToSave will be 'body .container div.controls' which is the elements we are talking about. 
... 
var LastElements = $(AJAXLoad('Elements'));