めも。
PHPとかで引数が足りていなくてもエラーにならない感じの関数をJavascriptでやりたい時。
function hoge(fuga){
if(typeof fuga === 'undefined') fuga = 'piyo';
console.log(fuga);
}
こんな感じにするとよい。
【Javascript】Javascriptの関数にデフォルト引数を設定する。
【jQuery】:contains()フィルタで完全一致を実現する方法。
セレクタで要素中に特定の値（テキスト）を含む条件を指定したい場合:contains()を用いてフィルターをかけると便利だが、こいつは完全一致ではないため文字列が含まれていればそのまま引っ張ってきてしまう。しかも正規表現が使用できないので完全一致の場合のみ選択したいとなるとちょっとこまる。
ということで調べてみた結果、結局ひっかかった要素をループでまわして評価していくしかなさそうなので下記のような感じで実装した。
下記のような同一のクラスを持つ要素の中で、「testtt」という文字列をもった要素のみテキストを書き換えたいとする。
この場合、普通に:contains()でフィルターをかけると4行目、5行目の要素も選択されてしまう。
<div class="target">test</div> <div class="target">testt</div> <div class="target">testtt</div> <div class="target">testttt</div> <div class="target">testtttt</div>
なので以下のようにする。
<script>
$(function(){
var txt = 'testtt';
var elem = null;
$('.target:contains('+txt+')').each(function(){
if($(this).text() == txt) elem = $(this);
});
elem.text('match!!');
})
</script>
ごり押しで解決。笑
【jQuery】指定した要素をDOM Elementで置き換える。
めも。
■HTML
<div class="target">target</div> <button type="button" class="js_btn">replace</button>
ボタンが押されたら上のdiv要素を置換してみる。
■Javascript
<script>
$(function(){
$('.js_btn').click(function(){
var elem = '<span>replaced</span>';
$('.target').replaceWith(elem);
})
})
</script>
こんな感じ。
【jQuery】指定した要素の手前にDOMを追加する。
めも。
下記のようなHTMLがあったと仮定。
<table class="table"> <thead> <tr><th>hoge</th><th>fuga</th><th>piyo</th></tr> </thead> <tbody> <tr><td>data1</td><td>data1</td><td>data1</td></tr> <tr><td>data2</td><td>data2</td><td>data2</td></tr> <tr class="target"><td>data3</td><td>data3</td><td>data3</td></tr> <tr><td>data4</td><td>data4</td><td>data4</td></tr> <tr><td>data5</td><td>data5</td><td>data5</td></tr> </tbody> </table> <button type="button" class="js_btn">append</button>
ボタンをクリックした時、特定要素（.target）の手前に一行追加したい場合は、下記の通り。
<script>
$(function(){
$('.js_btn').click(function(){
var elem = '<tr><td>data999</td><td>data999</td><td>data999</td></tr>';
$(elem).insertBefore('tr.target');
})
})
</script>
ちなみに。
$(a).insertBefore(b)、は「b」の手前に「a」が挿入される。
$(a).before(b)、は「a」の手前に「b」が挿入される。