2010-09-07 21 views
17

Ich habe einige Elemente, die den Text innerhalb editierbar haben müssen, dafür verwende ich das HTML 5-Attribut contentEditable. Ich kann nicht scheinen, jQuery dafür mit mehreren Selektoren zu verwenden. Ich möchte, dass jedes Tag in einem Container div bearbeitbar ist. Hier ist ein Beispiel dafür, wie es aussehen würde, wenn es funktioniert mit jQuery:HTML5 contentEditable mit jQuery

$("#container <all tags here>").contentEditable = "true"; 

Ich weiß nicht, wie man es macht alle Tags auswählen, aber Sie erhalten den Punkt.

Also alles Spannweite, div, Tabellen, fett, usw. sollten individuell

Antwort

33
$('#container *').attr('contenteditable','true'); 

* bedeutet "alle Elementtypen", und ist analog zu a,div,span,ul,etc...

Wie die meisten anderen jQuery-Funktionen bearbeitet werden wendet die gleiche Operation auf jedes vom Selektor erfasste Element an.

+7

@DaveJarvis: Das Attribut ist 'contenteditable', nicht' contentEditable'. Wenn dies in einigen IE-Versionen nicht funktioniert, liegt das daran, dass die Implementierung von setAttribute() 'des älteren IE kaputt ist. Daher würde ich empfehlen, stattdessen die Eigenschaft' contentEditable' zu ​​verwenden. Dies ist im Allgemeinen eine gute Idee für fast alle Attribute. Also würde ich '$ ('# container *') empfehlen. Prop ('contentEditable', 'true')' –

+0

contenteditable wird automatisch auf alle darunter liegenden Elemente angewendet, so dass du nur $ ('# container' brauchst)) .attr ("zufriedengestellt", "wahr"); – xtempore

4
$("#container *").attr("contentEditable", true) 

Nur eine Vermutung. Weg vom Arbeitsplatz.

0

Wenn ich mich richtig erinnern kann, würde die Einstellung des Wertes contentEditable auf dem Eltern auch bewirken, dass alle untergeordneten Elemente bearbeitet werden können.

dies also tun:

$('#container').attr("contentEditable", "true"); 

funktionieren sollte.

1

Ich habe den Eindruck, Sie das Problem an zwei Stellen sind Missverständnis:

  1. jQuery erstellt „query“ Objekte, die für die Manipulation von Sätzen von DOM-Elementen eine Kurz bieten. In Ihrem Beispielcode wird contentEditable für die Abfrage festgelegt, nicht die Übereinstimmung. Sie wollen die Kurzschrift von jQuery für "setzen Sie ein Attribut für alle übereinstimmenden Elemente", das ist $('whatever').attr('contentEditable','true');

  2. Ich bin mir nicht sicher, dass Sie contentEditable richtig verstehen. Sie sollten es für jede bearbeitbare Region auf dem Container der obersten Ebene festlegen, und die Auswirkungen gelten für alle darin enthaltenen Objekte. Meiner Erfahrung nach, wenn die Einstellung Editable auf oder etwas wie #container div.post wirklich nicht gut genug ist, dann haben Sie größere Probleme.

0

Aus irgendeinem Grund in IE10 schien nur diese Arbeit:

$('#container').get(0).contentEditable = "true"; 

Warum attr ich nicht funktionierten nicht kennen.

+3

Wie wäre es mit '$ ('# container *'). Prop (" contentEditable "," true ")'? –