jQueryのセレクタで、唯一のエレメントが抽出されるようなDOM要素を、文字選択状態にする
他のサイトを見ていると、getElementById で指定できるものを選択状態にする例はよく見かけました。でも、Jqueryのセレクタで選びたいのです(´д｀)
Javascriptで、マウスでドラッグしたような選択状態を作るには
document.createRange と window.getSelection を組み合わせて処理をするのが常套手段です。
※対象が textarea や inputなどの場合は $(‘input’).select(); で可能なのでそっちを使いましょう。
先に、以下が完成品…
他のサイトをパクっ参考にして1行書き換えただけ
//rangeオブジェクト作成
var range = document.createRange();
//jQueryのセレクタで getElementById 的な取得する
var element = $('dl dt:first + dd:first').get(0);
range.selectNodeContents(element);
//selection
var selection = window.getSelection();
selection.removeAllRanges(); //選択中のものを解除
selection.addRange(range); //rangeに基づいて選択状態にする
dl の中で一番最初に登場するdt要素の次にあるdd要素の一番最初のものを文字選択反転状態にする
$('dl dt:first + dd:first')
まあ、セレクタは適当に…唯一のものが抽出できるようなものを。
そもそも、#ID指定できればgetElementByIdでいいんですよ。#IDが振られていない要素を選択したいという要求です。
そのまま、elementをJqueryでひっぱればいいじゃん！→うごかないよ(´д｀)
var element = $('dl dt:first + dd:first');
こう書きたいのですが、この記述だと、element に jQuery オブジェクトが返ってしまいます。以降の処理がうまくいきません。あたりまえですが(^_^;
getElementById と同じものを返すには
jQueryのオブジェクト.get(0)で生のオブジェクトを取得できるようです。
var element = $('dl dt + dl:first').get(0);
あとは組み合わせれば完成。
完成品は↑のソースを。
jQuery.selectionプラグインとかも作られていますが、そこまでたいそうなものも要らないかなと思って、さくっと作ろうとおもったらわりとめんどくさかったので備忘録。
とあるブックマークレットを作った時に想像よりハマったので
出向先の子が、タンポポに花を乗せる的な流れ連続作業に、アホみたいに時間を掛けていたので、改善してやんよ！と調子に乗ってブックマークレットを作成しようとしたときのお話でした。
やっていたことは手動でのスクレイピングみたいな作業です。思考が介在する必要のないところ（コピペのために、ページ上の決まった一部分を、ドラッグでうまく選択するのに手がプルプルするとか）で、時間を捨てていました。
改善するために
作業を横で見ていると、jQueryのセレクタで完璧に選択できるような箇所を選択していたのでブックマークレットを作ってやりました。なんとか動きましたが、結構時間かかった…(^_^;
作業速度向上とミス軽減に役に立つことを祈っています。