Wie kann ich über HTML überlappende Textsegmente unterscheiden?

7

Einfache Frage, es ist gültig, überlappende Spannen in HTML zu haben?

Beispiel:

%Vor%

Bearbeiten:

Ich sehe jetzt, dass das schließende Tag der Spalten mehrdeutig wäre, um welches es sich schließt, und das erste </span> würde span id = 2 schließen, nicht 1, wie ich es beabsichtigte.

Mein Problem ist, dass ich einen Textblock habe, den ich anhand der Mausbewegungen hervorheben möchte. Dieser Textblock besteht aus Abschnitten, von denen sich einige "überlappen". Ich versuche, einige jQuery und HTML zu verwenden, um dieses Dokument so darzustellen, wenn ich den Mauszeiger über die Abschnitte halte, wird der entsprechende hervorgehoben.

Also, in meinem obigen Beispiel soll der erste Bereich mit dem ersten Tag zum Schließen des Bereichs beendet werden, und der zweite Bereich soll mit dem zweiten Tag zum Schließen des Bereichs beendet werden. Dies liegt an der Semantik meines Dokuments, das sind zwei überlappende Segmente.

Ich will es so, wenn ich nach links lege, wird es nur bis ID = 1 und die erste span schließen, wenn ich schwebe zwischen den beiden "überlappenden" Spannen, es wird beide markieren, und wenn Ich schwebe nach rechts, es wird von span id = 2 bis zum letzten span close.

Aber ich fange an zu denken, dass das nicht möglich ist. Gibt es eine Möglichkeit, Textabschnitte in HTML zu unterscheiden, die Überlappungen zulassen? Also mein jQuery-Skript, das hervorhebt, wenn ich über verschiedene Bereiche schwebe, hebt die korrekten Teile hervor.

Sollte ich zwischen Divs und Spannen wechseln? Wäre das klar, was ich dann schließe und erlaube mir die richtige Hervorhebung mit meinem jQuery-Hover-Skript? Ich wundere mich über mehr als 2 Segmente, die sich jetzt überschneiden. Seufz, ich wünschte, ich könnte nur erklären, was ich schließe.

    
Siracuse 28.04.2010, 00:26
quelle

7 Antworten

6

In HTML können sich keine Tags überlappen - sie müssen ordnungsgemäß verschachtelt sein. Der von Ihnen gepostete HTML-Code ist gültig, aber möglicherweise nicht semantisch, was Sie erwarten. A </span> beendet die vorherige <span> im selben Bereich. Sie haben nicht identifiziert, welche <span> , die Sie erwarten, mit jedem </span>

geschlossen wird %Vor%

Das würde in diesem Fall sicherlich einen großen Unterschied machen:

%Vor%     
Cade Roux 28.04.2010, 00:33
quelle
5

Der Inhalt eines SPAN -Elements darf jedes "inline" -Element enthalten. SPAN ist eines dieser "Inline" -Elemente. Weitere Details finden Sie in der DTD-Deklaration für das SPAN -Element .

    
Dustin 28.04.2010 00:30
quelle
3

Ja, das ist legal. Sie könnten das tun, um einen anderen Stil für die äußere und die innere Spannweite anzugeben (wenn Sie eine Klasse oder einen Stil angeben würden.).

BTW - Der gebräuchlichere Begriff dafür ist "Verschachtelung", nicht "Überlappung".

    
Andy White 28.04.2010 00:28
quelle
2

Dies ist legal ( foo ist rot; bar ist blau; spam ist wieder rot, da es verschachtelt ist):

%Vor%

Das ist nicht:

%Vor%

Aber es ist vielleicht erwähnenswert, dass es in MediaWiki und einigen anderen Sanitisierungs-Engines in Blogs usw. legal ist, da es das obige in folgendes umwandelt:

%Vor%

Man könnte argumentieren, dass dies ein schlechtes Verhalten fördert, aber nicht jeder, der einen Blog schreibt, ist genauso technisch wie die Leute wie wir, die einen Stack-Überlauf verwenden (als Community-Wiki wird das wahrscheinlich abgelehnt :-P)

    
cryo 28.04.2010 01:21
quelle
2
Ich weiß, es ist zu spät, um die Frage zu beantworten. Aber das könnte jemandem helfen.

Ja! Es ist völlig korrekt, dass keine Tags in HTML überlappen können. Ich hatte genaues Szenario, erwähnt wie in obiger Frage. Aber, alles hat eine Lösung! Wir können dieses Problem mit HTML-Tag-Versionierung lösen!

Das HTML-Snippet, das im obigen Problem erwähnt wird, kann wie folgt aussehen:

%Vor%

Nun müssen Sie einen benutzerdefinierten Handler für Ihre Mausbewegungen hinzufügen. Durch Handler-Callbacks müssen Sie die Bereichs-ID an JavaScript übergeben. Im JavaScript-Controller müssen Sie eine geeignete Zuordnung von parent id zu allen child ids beibehalten (z. B. für Version 1.x; {'1': ['1_1', '1_2', '1_3']} usw.). Nun, wenn Sie eine Maus über einen Bereich bewegen, können Sie alle seine Geschwister finden. Hier ist der Trick! Veröffentlichen Sie das, Sie müssen nur eine benutzerdefinierte CSS-Klasse für alle Versionen hinzufügen. (Wenn Sie zum Beispiel die Maus auf die ID 1_1 bewegen, werden alle 1_x Versionen hervorgehoben).

Es funktionierte reibungslos für mich, für alle Randfälle.

    
Ravindra Thorat 06.07.2017 17:16
quelle
1

Nein.

Wenn wir das erste Closing / Span treffen, ist es zweideutig, welche der beiden Öffnungsspannen Sie schließen wollen.

Die meisten Leute und ein Computer, da dies die einzige legale Option ist, werden Sie zu dem Schluss bringen, dass Sie beabsichtigen, die letztere Zeitspanne zu schließen. Aber angesichts des zusätzlichen Kontexts Ihrer Frage vermute ich, dass Sie tatsächlich die frühere Zeitspanne beenden wollten; Das ist nicht "legal".

Die Leute, die Sie mit "Sie haben gemeint, verschachtelt, nicht überlappend" korrigiert haben, machen die gleiche Schlussfolgerung; du könntest nicht bedeuten, dass du dich überschneidest, weil das illegal wäre. Ich glaube, du meintest wirklich "Überschneidungen", aber das ist in Ordnung, dein Geheimnis ist bei mir sicher.

    
John Mee 28.04.2010 00:49
quelle
1

Ich verstehe dein Problem, und anscheinend gibt es keine elegante Lösung. Wenn Sie sich nur für das visuelle Ergebnis interessieren, wäre eine Lösung, die Tags ordnungsgemäß zu schließen und erneut zu öffnen. Statt:

%Vor%

verwenden Sie etwas wie:

%Vor%

Wenn Sie nur die Farb- oder Hintergrundeigenschaften für die Hervorhebung verwenden (z. B. mit rgba color, um mehrere Hervorhebungen zu ermöglichen), sollten Sie dies tun. Wenn Sie Umriss / Umrandung verwenden, wird dies nicht funktionieren, da Sie auch Zwischenrahmen haben, wo Tags geschlossen werden.

IMHO, ein Tag oder eine andere Struktur (ich sehe es eher wie ein Anker), das Überlappungen erlaubt und angibt, wo es schließt, wäre etwas für die Implementierung zu berücksichtigen.

    
Costas 10.07.2013 12:44
quelle

Tags und Links