jQuery .html() aller übereinstimmenden Elemente

Lesezeit: 3 Minuten

Benutzer-Avatar
Przemek

.html() Funktion auf Klassenauswahl ($('.class').html()) gilt nur für das erste passende Element. Ich möchte einen Wert aller Elemente mit Klasse erhalten .class.

Benutzer-Avatar
Samich

Sie wählen alle Elemente mit Klasse aus .class Aber um alle HTML-Inhalte zu sammeln, müssen Sie sie alle durchlaufen:

var fullHtml;

$('.class').each(function() {
   fullHtml += $(this).html();
});

Suchen Sie nach Elementen, indem Sie Text darin enthalten:

$('.class:contains("My Something to search")').each(function() {
   // do somethign with that
});

Code: http://jsfiddle.net/CC2rL/1/

  • Es stimmt mit diesen Elementen überein, aber nicht mit ihren Werten.

    – Przemek

    22. September 2011 um 16:23 Uhr

  • Ihr Code stimmt mit Etwas überein. Ich möchte nur das “Etwas” richtig abgleichen, aber ausgerechnet Elemente mit der Klasse “Klasse”.

    – Przemek

    22. September 2011 um 16:28 Uhr

  • So etwas wie in der zweiten Probe?

    – Samich

    22. September 2011 um 16:31 Uhr

Benutzer-Avatar
jambriansreed

Ich bevorzuge einen Einzeiler:

var fullHtml = $( '<div/>' ).append( $('.class').clone() ).html();

  • Dies hätte einen Nebeneffekt, es würde versuchen, die Elemente von $(.class) in das Innere des virtuellen zu verschieben div Element, dh sie würden aus dem eigentlichen DOM entfernt. Möglicherweise müssen Sie Folgendes tun clone() erstmal, aber das wäre wohl zu viel Overhead.

    – Walty Yeung

    7. Oktober 2015 um 8:49 Uhr

Du könntest das abbilden html() jedes Elements in einer gefilterten jQuery-Auswahl zu einem Array und verbinden Sie dann das Ergebnis:

           //Make selection
var html = $('.class')
          //Filter the selection, returning only those whose HTML contains string 
          .filter(function(){
              return this.innerHTML.indexOf("String to search for") > -1
          })
          //Map innerHTML to jQuery object
          .map(function(){ return this.innerHTML; })
          //Convert jQuery object to array
          .get()
          //Join strings together on an empty string
          .join("");

Dokumentation:

Benutzer-Avatar
glücklich

$('.class').toArray().map((v) => $(v).html())

Benutzer-Avatar
Mohsen

Samich Antwort ist richtig. Vielleicht mit einer Reihe von htmls ist besser!

var fullHtml = [];

$('.class').each(function() {
   fullHtml.push( $(this).html() );
});

Benutzer-Avatar
Colin

Falls Sie die gesamten Elemente (auch mit dem äußeren HTML) benötigen, gibt es hier eine weitere Frage mit relevanten Antworten: Holen Sie sich das äußere HTML des ausgewählten Elements

Eine einfache Lösung wurde von @Volomike bereitgestellt:

var myItems = $('.wrapper .items');
var itemsHtml="";

// We need to clone first, so that we don’t modify the original item
// Thin we wrap the clone, so we can get the element’s outer HTML
myItems.each(function() {
    itemsHtml += $(this).clone().wrap('<p>').parent().html();
});

console.log( 'All items HTML', itemsHtml );

Eine noch einfachere Lösung von @Eric Hu. Beachten Sie, dass dies nicht von allen Browsern unterstützt wird outerHTML :

var myItems = $('.wrapper .items');
var itemsHtml="";

// vanilla JavaScript to the rescue
myItems.each(function() {
    itemsHtml += this.outerHTML;
});

console.log( 'All items HTML', itemsHtml );

Ich poste den Link zu der anderen Antwort und was für mich funktioniert hat, weil ich bei der Suche zuerst hier angekommen bin.

Wenn Sie Ihr jQuery-Objekt in eine Array du kannst reduzieren darüber.

const fullHtml = $('.class')
   .toArray()
   .reduce((result, el) => result.concat($(el).html()), '')

1136870cookie-checkjQuery .html() aller übereinstimmenden Elemente

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy