Elemente prüfen und verändern

[blabla333]

Ich brauche nur einen Tipp, wie ich korrekt einen String nach bestimmten Elementen prüfen kann und diese ggf. verändern kann. Dazu liegt mir eine Variable mit einem String vor - ich nenne die Variable einfach mal "inhalt_html":

var inhalt_html = "<p>Beispiel</p>
<p>Dies ist</p>
<p>einfach nur ein Beispiel</p>
<p>wie so ein <b>String</b> aussehen</p>
<p>könnte</p>
<p>Test</p>
<p>oder so...</p>";

Ich möchte nun alle p-Elemente von "inhalt_html" durchgehen und prüfen, ob der Inhalt dieses p-Elements einen bestimmten Wert hat.

var arr =["Beispiel","Test"];

Ist z.B. der Inhalt eines p-Elementes == "Beispiel" oder "Test", so soll es in ein h1-Element umgewandelt werden.

Leider bin ich in JS einfach noch nicht so bewandert, so dass ich einfach nicht genau weiß mit welcher Methodik man da am besten vorgeht. Da ich idR JQuery einsetze, dachte ich an each()...

Also irgendwie so...

$('p').each(function(index){
$(this).html()
});

Aber erstens wäre das ja für den ganzen DOM... ich beziehe aber meine Daten aus einem String, welcher ein HTML-Konstrukt enthält. Und zweitens weiß ich nicht, wie ich damit weiterarbeiten soll, d.h. prüfen kann, ob der Inhalt dieses Elements gleich einem Element aus dem Array ist.

Ihr seht schon... Ich will keine fertige Lösung (nehme ich natürlich auch gerne :) ), aber alleine komme ich auch nicht weiter.

 

[Tronjer]

Der Ansatz ist schon richtig.

Für den zweiten Teil würdest etwas wie inArray() benötigen. Ganz alleine mit jQuery wird das wahrscheinlich nicht gehen.

 

[blabla333]

Und wie verbinde ich die variable "inhalt_html" mit "$('p').each()"? Denn schließlich soll ja in der Variable gesucht werden... Stehe da irgendwie auf dem Schlauch.

 

[Tronjer]

So?

<div id="box">
  <p>foo</p>
  <p>bar</p>
  <p>baz</p>
</div>

(function($) {
  var myArr = ['hello', 'world', 'bar'];

  $('#box p').each(function(e) {
    var str = $(this).html();

    if ( $.inArray(str, myArr) !== -1 ) {
      alert('im Array: ' + str);
    }
  });
})(jQuery);

 

[blabla333]

Ok, vielleicht verstehe ich es nicht ganz oder wir reden aneinander vorbei.

Innerhalb eines JS-Teils wird die Variable inhalt_html gesetzt. Nun soll diese weiterverarbeitet werden. Deshalb eben meine Frage, wie ich nun den Inhalt eben mit der each-Funktion bearbeiten kann.
Aber ich habe schon das Gefühl, dass das so nicht geht. Nur... wie dann?

(function($) {
  var myArr = ['hello', 'world', 'bar'];
  var inhalt_html = "<p>usw...</p>"; // Dieser String soll nun in den nächsten Zeilen weiterverarbeitet werden.
  $('#box p').each(function(e) {
    var str = $(this).html();
    if ( $.inArray(str, myArr) !== -1 ) {
      alert('im Array: ' + str);
    }
  });
})(jQuery);

 

[Tronjer]

Dann befreie den String von den Tags, oder besser noch, schreibe die Tags gar nicht erst in die Variable.

 

[blabla333]

Ich habe es jetzt doch lieber im DOM umgesetzt. Geht deutlich einfacher. Nur ein Problem ergibt sich noch für mich:

<h1>Beispiel</h1>
<p>Dies ist</p>
<p>einfach nur ein Beispiel</p>
<p>wie so ein <b>String</b> aussehen</p>
<p>könnte</p>
<h1>Test</h1>
<p>oder so...</p>

Wie kann ich nun per JQuery je einen div-container von einem h1 bis zum nächsten h1 (oder Ende) erstellen?
Also so:

<div><h1>Beispiel</h1>
<p>Dies ist</p>
<p>einfach nur ein Beispiel</p>
<p>wie so ein <b>String</b> aussehen</p>
<p>könnte</p></div>

<div><h1>Test</h1>
<p>oder so...</p></div>

Ich denke, dass ich dann alles zusammen hätte, was ich brauche...

 

[Tronjer]

Woran machst du Anfang und Ende fest?

Gängige Methoden um HTML-Elmente zu erstellen und ins DOM einzufügen sind: append/appendTo, prepend/prependTo, wrap.

 

[blabla333]

Genau das ist mein Problem. Von einem h1-Element bis zum nächsten h1- Element. Alles was dazwischen ist, wird in den div-container gepackt. Ich weiß aber nicht, wie ich "alles dazwischen" ansprechen kann.

 

[Tronjer]

Das ist nicht so schwer.

<div id="box">
  <h1>Hello</h1>
  <p>foo</p>
  <p>bar</p>
  <h1>world</h1>
</div>

var el = $('#box').find('h1').nextUntil('h1').andSelf();
$(el).wrapAll('<div></div>');