[FRAGE] Elemente Manipulieren und Selektieren

[canbiz]

Hallo, bin dabei Jquery zu lernen,
dafür hab ich mir eine Aufgabe von einen Freund geben lassen,

es sollen <buttons> nur im Scriptbereich manupuliert werden damit sie funktionieren.

Sieht wie folgt aus:

		<div id="rechner">
			<div id="display">0</div>
			<div id="nummern">
				<button>7</button>
				<button>8</button>
				<button>9</button>
				<button>4</button>
				<button>5</button>
				<button>6</button>
				<button>1</button>
				<button>2</button>
				<button>3</button>
				<button class="colspan">0</button>
				<button>,</button>
			</div>
			<div id="operatoren">
				<button>/</button>
				<button>←</button>
				<button>*</button>
				<button>C</button>
				<div style="float:left;width:37px;">
					<button>-</button>
					<button>+</button>
				</div>
				<button class="rowspan">=</button>
			</div>
		</div>

Meine Frage ist, wie selektiere ich diese Button, ohne den HTML Quellcode zu ändern, sprich nur mit Jquery/Javascript

 

[devnull69]

Selektieren ... ich bin mir nicht sicher, ob Du das wirklich meinst. Aber selektieren kann man in jQuery über Selektoren. Und alle Buttons bekommt man über

$('button')

 

[canbiz]

Müsste aber jeden einzeln Selektieren, moment ich mach mal n jsfiddle

Hier: Edit fiddle - JSFiddle

 

[devnull69]

Ja, aber Dein Code zeigt doch schon die Selektoren (beginnen alle mit #). Dafür müsstest Du lediglich Deinen Buttons jeweils ein id-Attribut verpassen (z.B. id="addition" für den button "+")

 

[canbiz]

Ja und genau das muss ich ja machen,
nur ebend im Script bereich, nicht unten im HTML bereich.. das ist mein Problem

 

[miniA4kuser]

Was meinst du mit Scriptbereich???

Oder willst du das Problem unbedingt lösen ohne das HTML zu ändern???

 

[canbiz]

Danke schonmal

 

[miniA4kuser]

Danke schonmal

Deine Aufgabe werde ich hier aber nicht lösen, frage mich sowieso, was für einen Sinn die Aufgabe haben soll...

Du willst also mit JavaScript dein vorhandenes HTML an das Taschenrechner-JavaScript anpassen?
Dann hast du in Beitrag #2 ja schon deine Frage beantwortet bekommen.
Du musst schauen welche Elemente mit welchen Attributen (id, value etc.) dein Taschenrechner-JavaScript benötigt und diese dann entsprechend abändern.
$('#1,#2,#3,#4,#5,#6,#7,#8,#9,#0') ist falsch, da ID's mit einem Buchstaben beginnen müssen, siehe Selfhtml...ID, IDREF oder Name

 

[tsseh]

da ID's mit einem Buchstaben beginnen müssen, siehe Selfhtml...ID, IDREF oder Name

in html5 dann mal nicht mehr

 

[canbiz]

Ich will nichts gelöst haben, ich möchte nur wissen, wie man per JQuery auf <button>1</button> zugreifen kann, und diesen eine ID zuweißen kann.. mehr brauch ich nicht

 

[devnull69]

Das ist ganz einfach, aber für 20 Buttons wenig spaßig und noch weniger sinnvoll. Beispiel:

$('button:contains("1")').attr('id', '1');

 

[miniA4kuser]

Das ist ganz einfach, aber für 20 Buttons wenig spaßig und noch weniger sinnvoll. Beispiel:

$('button:contains("1")').attr('id', '1');

Das ganze Vorhaben ist irgendwie sinnlos, selbst für einen einzigen Button...
Ich würde das über ein Array machen wo alle Werte drinnen stehen und dann darüber iterieren, etwa so (ungetestet):

// Jedes Array-Element hat 3 Einträge:
// ['Suchwert', 'zu vergebende ID des Elementes', 'zu vergebende value des Elementes oder null']
var pattern = [
		['0', '0', '0'],
		['1', '1', '1'],
		['2', '2', '2'],
		['3', '3', '3'],
		['4', '4', '4'],
		['5', '5', '5'],
		['6', '6', '6'],
		['7', '7', '7'],
		['8', '8', '8'],
		['9', '9', '9'],
		[',', 'coma', '.'],
		['+', 'addition', null],
		['-', 'subtraction', null],
		['*', 'multiplication', null],
		['/', 'division', null],
		['=', 'equals', null],
		['C', 'C', null],
		['←', 'backspace', null]
	];

$.each(pattern, function () {
	if (this[2] && this[2] !== null) {
		$('button:contains("' +  $('<div></div>').html(this[0]).text() + '")').attr('id', this[1]).attr('value', this[2]);
	} else {
		$('button:contains("' +  $('<div></div>').html(this[0]).text() + '")').attr('id', this[1]);
	}
});

 

[kkapsner]

diesen eine ID zuweißen kann

Warum willst du eine ID zuweisen, wenn du dann sowieso schon eine Referenz auf den Button hast?

@miniA4kuser:

$('<div></div>').html(this[0]).text()

das ist jetzt nicht wirklich dein Ernst...

 

[miniA4kuser]

Warum willst du eine ID zuweisen, wenn du dann sowieso schon eine Referenz auf den Button hast?

Weil das HTML an das JavaScript (welches meiner Meinung danach trotzdem nicht funktionieren wird) angepasst werden soll und nicht das JavaScript an das HTML angepasst werden soll.
Aber frag mich nicht warum

@miniA4kuser: das ist jetzt nicht wirklich dein Ernst...

Klar hätte ich auch

var e = document.createElement('div');
e.innerHTML = this[0];
$('button:contains("' +  e.childNodes[0].nodeValue + '")')...

machen können, aber ich wollte es mal bei reinem jQuery belassen.
Oder wie würdest du, unter Berücksichtigung von :contains (Vorschlag von devnull69), nach dem gerenderten ← vergleichen;

 

[kkapsner]

"\u21d0"

 

[miniA4kuser]

Oder wie würdest du, unter Berücksichtigung von :contains (Vorschlag von devnull69), nach dem gerenderten & larr; vergleichen;

"\u21d0"

Entweder stehe ich gerade voll auf der Leitung, oder das funtkioniert so nicht...

PS: Das & larr; natürlich ohne dem Leerzeichen. Wird vom Quote sonst interpretiert...

 

[kkapsner]

Ups - hab' den & lArr; nachgesehen:
der larr ist: "\u2190"

 

[miniA4kuser]

Cool! Das funzt ja wirklich...

 

[dbarthel]

Cool! Das funzt ja wirklich...

Ja, hab ich auch noch nicht gekannt, zuvor.

 

[kkapsner]

Die HTML-Entities sind auf feste Unicode-Codepoints gemapped. Das ist ja im Grunde genommen das, was du da auch gemacht hast... nur eben nicht im Browser jedes mal, sondern nur einmal.