jQuery Selector Erstellungshelfer für Firefox

[BurnerR]

Ich skripte grad so ein kleines bisschen mit Greasemonkey.
Jetzt habe ich da eine Seite, wo leider auch die id Eigenschaft teilweise dynamisch generiert wird, deswegen muss ich mir einen etwas komplizierteren Selektor bauen.
Das ist aber ein wenig nervig mit try & error an die Sache ranzugehen, zumal man ja gerne mal was übersieht.
Ich kann aber irgendwie kein Add-on für firefox finden, dass folgendes macht:
Als Input einen Jquery-Selektor und als Output (am besten in echtzeit) alle Elemente in einer Liste, die damit selektiert werden.
Sowas muss es doch geben, oder übersehe ich etwas?
Ich nehme notfalls auch ein Chrom(ium) Add-on.

 

[dexter]

Als Input einen Jquery-Selektor und als Output (am besten in echtzeit) alle Elemente in einer Liste, die damit selektiert werden.
Sowas muss es doch geben, oder übersehe ich etwas?

kannst Du da etwas konkreter werden?

 

[werner]

Wenn du mit $(".button") was selektierst, bekommst du ja alle Elemente, die damit selektiert werden in einer Liste. Kannst du bestimmt auch an ein DOMChange event hängen. Oder was meinst du?

 

[KingJamez]

[src=html4strict]
<input type="text" data-myinput="true">
<div data-mycontent="true"></div>
[/src]

[src=javascript]
var $content = $('*[data-mycontent="true"]');
var $input = $('*[data-myinput="true"]');
$input.on('change', showContent);
[/src]

die showContent:
[src=javascript]
function showContent(event) {
$content.html('leer');
var selector = $(this).val();
$(selector).clone().appendTo($content);
}

[/src]

Habe den Code nicht getestet, sondern hier im Fenster geschrieben!
Chrome/ Chromium können selectieren mit der Selector engine. Dazu öffnest du die Developer Tools, springst in die console und gibst
[src=javascript]
// das ist kein jquery!! nur ein shortcut für querySelector(..)
$('body')
[/src]
ein. Nach dem druck auf enter wird dir darunter das selektierte DOM Element angezeigt, mit einem klick darauf springt chrome in das elements Panel und zeigt dir das Element.

Wenn du mehr willst, geht das auch wunderbar über die Console
[src=javascript]
document.querySelectorAll('div').length
[/src]
gibt dir zum die Anzahl der div´s auf der Seite aus. Willst du alle elemente sehen geht das mit folgendem Einzeiler.
[src=javascript]
document.querySelectorAll('div').forEach((el) => { console.log(el) })
[/src]

 

[BurnerR]

Ah, wie klasse! Das ist genau das, was ich gesucht habe, vielen dank!
Mit Boardmitteln und sehr übersichtlich .

 

[KingJamez]

Mit Javascript mitteln, gib dich nicht auf, lern Javascript