web-dev-qa-db-fra.com

Comment convertir un objet jQuery en chaîne?

Comment convertir un objet jQuery en chaîne?

jquerystringification
394
chief7

Je suppose que vous demandez la chaîne HTML complète. Si c'est le cas, quelque chose comme ça fera l'affaire:

$('<div>').append($('#item-of-interest').clone()).html();

Ceci est expliqué plus en détail ici , mais vous créez essentiellement un nouveau nœud pour envelopper l'élément d'intérêt, effectuer les manipulations, le supprimer et récupérer le code HTML.

Si vous êtes juste après une représentation sous forme de chaîne, utilisez alors new String(obj).

Mise à jour

J'ai rédigé la réponse originale en 2009. Depuis 2014, la plupart des principaux navigateurs prennent désormais en charge outerHTML en tant que propriété native (voir, par exemple, Firefox et Internet Explorer ), afin que vous puissiez faire:

$('#item-of-interest').prop('outerHTML');
584
John Feminella

Avec jQuery 1.6, cela semble être une solution plus élégante:

$('#element-of-interest').prop('outerHTML');
186
nickh

Utilisez simplement .get (0) pour récupérer l’élément natif et obtenir sa propriété outerHTML:

var $elem = $('<a href="#">Some element</a>');
console.log("HTML is: " + $elem.get(0).outerHTML);
50
mppfiles

Pouvez-vous être un peu plus précis? Si vous essayez d'obtenir le HTML à l'intérieur d'un tag, vous pouvez faire quelque chose comme ceci:

Extrait HTML:

<p><b>This is some text</b></p>

jQuery:

var txt = $('p').html(); // Value of text is <b>This is some text</b>
21
Alex Rockwell

Le meilleur moyen de déterminer les propriétés et les méthodes disponibles pour un nœud HTML (objet) est de procéder de la manière suivante:

console.log($("#my-node"));

À partir de jQuery 1.6+, vous pouvez simplement utiliser outerHTML pour inclure les balises HTML dans la sortie de votre chaîne:

var node = $("#my-node").outerHTML;
8
crystalh

jQuery est ici, alors:

jQuery.fn.goodOLauterHTML= function() {
    return $('<a></a>').append( this.clone() ).html();
}

Renvoie tout ce contenu HTML:

$('div' /*elys with HTML text stuff that you want */ ).goodOLauterHTML(); // alerts tags and all
7
Max Meents

Cela semble bien fonctionner pour moi:

$("#id")[0].outerHTML
4
Johan Dettmar

La réponse acceptée ne couvre pas les nœuds de texte (les caractères non définis sont imprimés).

Cet extrait de code résout le problème suivant:

var htmlElements = $('<p><a href="http://google.com">google</a></p>↵↵<p><a href="http://bing.com">bing</a></p>'),
    htmlString = '';
    
htmlElements.each(function () {
    var element = $(this).get(0);

    if (element.nodeType === Node.ELEMENT_NODE) {
        htmlString += element.outerHTML;
    }
    else if (element.nodeType === Node.TEXT_NODE) {
        htmlString += element.nodeValue;
    }
});

alert('String html: ' + htmlString);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
2
Martin Sznapka

Pas besoin de cloner et d'ajouter au DOM pour utiliser .html (), vous pouvez faire:

$('#item-of-interest').wrap('<div></div>').html()
1
St Kiss

Il peut être possible d'utiliser la fonction utilitaire jQuery.makeArray(obj):

var obj = $('<p />',{'class':'className'}).html('peekaboo');
var objArr = $.makeArray(obj);
var plainText = objArr[0];
0
duttyman

Si vous souhaitez structurer un élément HTML afin de le transmettre quelque part et de le réanalyser à un élément, essayez de créer une requête unique pour cet élément:

// 'e' is a circular object that can't be stringify
var e = document.getElementById('MyElement')

// now 'e_str' is a unique query for this element that can be stringify 
var e_str = e.tagName
  + ( e.id != "" ? "#" + e.id : "")
  + ( e.className != "" ? "." + e.className.replace(' ','.') : "");

//now you can stringify your element to JSON string
var e_json = JSON.stringify({
  'element': e_str
})

que

//parse it back to an object
var obj = JSON.parse( e_json )

//finally connect the 'obj.element' varible to it's element
obj.element = document.querySelector( obj.element )

//now the 'obj.element' is the actual element and you can click it for example:
obj.element.click();
0
Yaron Helfer