TOP カテ一覧 スレ一覧 100〜終まで 2ch元 削除依頼
自分のサイトやブログに自分の顔写真載せてる奴
【digitalstage】BiND for WebLiFE
「ただいま厨と戦闘中」管理人野戦病院
Dreamweaver CS3
俺がwebサービスを作ってみるスレ
言語障害者の意味のわからない質問に答えてみるスレ
自分のサイトやブログに自分の顔写真載せてる奴
おいおまえら!なんでサイト立ち上げたんだ?
こんな訪問者はもう来るな!
web spaceを訴える会

+ jQuery 質問用スレッド vol.7 +


1 :2016/06/24 〜 最終レス :2020/02/29
JavaScriptで一番有名なDOM用関数型風ライブラリであるjQueryのスレです。
jQueryを使うとJavaScript単体では面倒な処理でもほんの数行で実現可能になります。

一部でもうjQueryは要らない等と言ってますが、あれはjQueryよりも導入が大変な
フレームワークを導入したらいらなくなるって話であって、従来通りHTMLにちょっと
動きをつけたい程度ならjQueryが最適です。

jQuery以外のライブラリの質問はライブラリ総合質問所で質問して下さい。
ライブラリ以外の質問はJavaScriptスレで質問して下さい。

■過去スレ (※vol3はありません。大人の事情でライブラリ総合質問所を乗っ取りました。)
+ JavaScript & jQuery 質問用スレッド vol.6 + [無断転載禁止]©2ch.sc
http://echo.2ch.sc/test/read.cgi/hp/1465566635/
+ JavaScript & jQuery 質問用スレッド vol.5 + [無断転載禁止]©2ch.sc
http://echo.2ch.sc/test/read.cgi/hp/1452081417/
jQuery ライブラリ 総合質問所 vol.4
http://peace.2ch.sc/test/read.cgi/hp/1400313626/

■関連スレ
+ JavaScript の質問用スレッド vol.120 + [無断転載禁止]©2ch.sc
http://echo.2ch.sc/test/read.cgi/tech/1463914293/
+ JavaScript の質問用スレッド vol.130 + [無断転載禁止]©2ch.sc
http://echo.2ch.sc/test/read.cgi/hp/1463395557/
JavaScript ライブラリ総合質問所 vol.5 [無断転載禁止]©2ch.sc
http://echo.2ch.sc/test/read.cgi/hp/1465399470/

2 :
■参考リンク
・jQueryトップページ
http://jquery.com/

・ダウンロード、CDN
http://jquery.com/download/

・ブラウザサポート
http://jquery.com/browser-support/

・jQuery UI
http://jqueryui.com/

・jQuery UI ダウンロ−ド
http://jqueryui.com/download/

・リファレンス等
http://js.studio-kingdom.com/jquery/
http://alphasis.info/jquery/ (http://alphasis.info/jquery-api/)
http://www.jquerystudy.info/

■諸注意
過去スレはjQuery信者がjQuery布教の為にライブラリ総合質問所を乗っ取るためにたてたスレです。
その為、荒らしが常駐していますが、基本的に煽りはスルーしましょう。

3 :
最近javaScriptを独学で学んでいる者です

複数のul要素(同クラス名)の、子要素liの2番目に .before() でli要素を追加したいのですが、

var li = $('<li>').text('text');
$(ul.test > li:eq(1)).before(li);

では:eq(1)のせいか最初のulの子要素にしか反映されませんでした。
このような場合はどのようにすれば全ての同class名のulに反映されるのでしょうか?

4 :
jQueryは、最初の1つしか取り出せない。
複数は取り出せないから、

ul.test1
ul.test2

など、異なるクラスを、割り当てればいい

5 :
>>3
これでできるよ。

var li = $('<li>').text('text');
$('ul.test > li:nth-of-type(2)').before(li);

あとウソを付くやつがいるから気をつけてなw
jQueryは複数の要素に適用することができる。
メソッドの効果(今回で言えばbefore)は複数の要素に適用される。

値を返すメソッドに限り最初の要素の値のみを返す。

6 :
$(ul.test > li:eq(1)).before(li);
$('ul.test > li:nth-of-type(2)').before(li);

同じ構文なのに、上は1つで、下は複数になるのか? なぜ?

7 :
>>6
同じじゃないじゃんw

eqとnth-of-typeは意味が違うってだけ

8 :
.fooが後述するh2要素をjQuery()で取得するのはどのように書けばいいでしょうか

<h2>hoge</h2>
<p class="foo">foo</p>
<h2>hoge</h2>
<p class="foo">foo</p>
<h2>hoge</h2>
<p class="piyo">piyo</p>

9 :
>>8
これでいい?

$(".foo").prev('h2').css('color', 'red');

以下の場合上2つのh2が赤になる。

<h2>hoge</h2>
<p class="foo">foo</p>

<h2>hoge</h2>
<p class="foo">foo</p>

<h2>hoge</h2>
<p class="piyo">piyo</p>

<h3>hage</h3>
<p class="foo">hage-foo</p>

<h2>hoge</h2>
<h3>hage</h3>
<p class="foo">hoge-hage-foo</p>

10 :
>>9
一つのセレクタで割り出すことは不可能ですか?

11 :
自己解決しました
https://jsfiddle.net/p3mv2cf3

12 :
セレクタにおける :nth-of-type(), :nth-child(), :eq() の違いを教えてください

13 :
>>12
サンプルでも作って調べればわかるんじゃねーの?

nth-of-type と nth-child は単なるCSSセレクタなんだから
こことか見れば書いてあるだろ
https://developer.mozilla.org/ja/docs/Web/CSS/:nth-of-type

14 :
>>13
検証してもわからないから質問しているのですが
:eq()に触れてないのはなぜですか?

15 :
>>14
:eqはCSSセレクタじゃないからなだけだけど?
まずnth-of-typeとnth-childの違いを言ってみ
読むべきページは出したよね?

16 :
>>15
セレクタの:eq()を知らないんですね
http://api.jquery.com/eq-selector/

17 :
>>16
英語は読めるかい?

Because :eq() is a jQuery extension and not part of the CSS specification,

18 :
>>17
jQuery拡張でも使えれば問題にしてないんですが

19 :
>>18

>>13で:eq()に触れてないのはCSSセレクタじゃないから
だって話なんですが?

20 :
>>19
CSSセレクタでないと都合が悪いのですか?

21 :
>>12
- :nth-of-type() … 同じ要素タイプのグループ内におけるn番目の要素(インデックスは1から始まる)
- :nth-child() … 全要素におけるn番目の要素(インデックスは1から始まる)
- :eq() … 全要素におけるn番目の要素(インデックスは0から始まる)

22 :
>>20
CSSセレクタじゃないとMDNに説明があるわけ無いだろw

23 :
>>21
ありがとうございました

>>22
MDNに載っている内容で質問しているわけではありません
質問文をよく読まれてはいかがでしょうか

24 :
>>23
だからMDNに説明書いてあるんだから
読めって話だ。

25 :
まとめ「俺はMDNに書いてある事しか回答できません。:eqなんて知りません。」

26 :
MDNの回答すら見なかったくせにw

27 :
どえでもいいけど、>>14からの流れはMDNではぐらかしているようにしか見えないんだよな

28 :
jQueryにelement.classList相当のAPIはありますか
classトークンを配列で得るAPIを求めています

29 :
>>28
普通にclassNameをスペースで区切ればいいだけだけど?

そもそもclassListっていうのはclassNameに書かれた
スペースで区切られた複数のクラスのうち特定のものだけ抽出したり
変更して再設定するのが面倒だから追加された機能なんだけど。

おそらくクラスの使い方を間違ってると思うよ。
それhasClass()とかでもっと効率的に書ける問題でしょ?

30 :
>>29
hasClass, removeClass, toggleClassは全て知っています
そんなに多くはないのですが、classトークンを配列で欲しい状況があります

31 :
element.className.split(' ')しかないのなら残念です
classListの代替機能がjQueryにあることを期待していたのですが

32 :
classListはIE9では使えないからな
俺もjQueryにあるなら使いたいわ

33 :
俺がライブラリの開発者なら、
element.className.split(' ') で済むものを
$(element).classNames() なんてメソッド作ろうと思わないな。

それはそれとして、どういうときに使いたくなるの?

34 :
まずはあるかないかを答えてやればいいのに目的を聞いてくるあたり、jQueryに不利な情報は出したくない感が見えるな
少なくとも俺の知る限りではないんんだが

35 :
そうやって使う目的をいわないでjQuery批判に
持っていこうとしている所がわざとらしいよなw
最初からそれが狙いみたいな。
それがバレバレだから使う目的を聞かれてるんだよ。

36 :
具体的にはclassトークン文字列を直接操作する場合に必要になります
例えば、下記では 1,2,3 の数値を参照することを求めます。

<p class="hoge-1">hoge</p>
<p class="hoge-2">hoge</p>
<p class="hoge-3">hoge</p>

「data-*属性で数値を分離すればいい」とする対案もあるでしょうが、

<p class="hoge" data-hoge="1">hoge</p>
<p class="hoge" data-hoge="2">hoge</p>
<p class="hoge" data-hoge="3">hoge</p>

既存コードを改修する場合に改修個所が多くてHTMLを書き換えるのが現実的ではないケースがあります

「何が最善か」は時と場合によります
「全てにおいて〜が最善」という事がなければ「は〜という理由で絶対に使わない」という事もないと私は考えています
バッドノウハウと他人に評価されようが、使えるカードは出来るだけ取っておくのが私の流儀です
その為には使えるカード(jQueryにclassListがあるのか)を予め知っておく必要があります

37 :
「これこれこういう理由でclassListは使わない」なアドバイスは有り難く頂戴しますが、それはそれとしてclassListの有無は答えて頂きたいのが正直な気持ちです
今、必要なのは「事実」であって「意見」ではありません
「使う/使わない」は各自が自由に決めればいい事であって他人に押し付けるものではない、と私は思います

38 :
> それはそれとしてclassListの有無は答えて頂きたいのが正直な気持ちです
うん。だからelement.className.split(' ')で取れるよって

39 :
なんでJavaScriptでも手間変わらずに同じことをやれるのに
jQueryにそれを求めるのだろうか?

jQuery.eachとかは古いブラウザでは搭載してなかったから
という理由で入ったんだぞ。手間変わらずに同じことができるなら
jQueryを使わなくていいんだよ。

jQueryはDOM操作を関数型風に使うためのライブラリなんだから。

40 :
>>36
意味がわからん。っていうか答えになってない。

その話だけなら、$('p').attr('class') とかでいいだろ。

classList相当のものを探していたんじゃないのか?
classListを使っても hoge-1 とかしか取得できない。
1, 2, 3 という数値を取ることはできない。

41 :
もしかしてattrでclassを取得できるっていうのが分かってないとかだろうかね?

例えばこんなことだってできる。

$('p[class^="hoge-"]').attr('class', function() {
 return this.className.replace('hoge', 'hage');
});

この答えで100%問題ないだろ?w


って言ったら駄目だっていうんだろうな。
だからなんに使うのかを聞いてるのに。

42 :
>>36
> 例えば、下記では 1,2,3 の数値を参照することを求めます。
>
> <p class="hoge-1">hoge</p>
> <p class="hoge-2">hoge</p>
> <p class="hoge-3">hoge</p>

classって複数指定できるの知ってる?
<p class="hoge-1 hoge-2">hoge</p>
って書いてあったらどするの?

1,2,3 の数値を参照ってどういうこと?

43 :
>>36
> その為には使えるカード(jQueryにclassListがあるのか)を予め知っておく必要があります
あ、つまり、今すぐにどういうことに使おうか思いつかないが
機能を知りたいだけねw

ならあるっていうのが答え。
できた時代から考えてjQueryを参考にしてclassListを作ったようなものだから。

https://api.jquery.com/category/manipulation/class-attribute/
classList.add → .addClass()
classList.remove → .removeClass()
classList.toggle → .toggleClass()
classList.contains → .hasClass()

更に値としてコールバック関数が使えるなどjQueryオブジェクト(DOM要素コレクション)を
操作しやすく拡張されている。

44 :
「jQueryにはない」という意見しか出ないですね
残念ですが、自前で拡張する事にします
回答を下さった方、ありがとうございました

45 :
必死だなw あるって話をしてるのに。

46 :
ごめん

教えてほしいことがあります。

http://www.dotup.org/uploda/www.dotup.org948347.png.html

↑サイトが開かれるのと同時に開く確認ダイアログの中に、アフィリエイト広告を張り付けたいんだけど、どうやればいい?
それとも、仕組み上無理なの?


コード自体は、web上で公開されてるヤツで、いろいろいじってみてるんだけど、初心者にはよくわからん……

↓どこをどういじればいいの?

http://www.dotup.org/uploda/www.dotup.org948354.txt.html

47 :
>>46
jQueryと関係ないのでこっちにどうぞ

+ JavaScript の質問用スレッド vol.130 + [無断転載禁止]©2ch.sc
http://echo.2ch.sc/test/read.cgi/hp/1463395557/

48 :
すみません、スレ違いでしたか……

丁寧に誘導までしていただきありがとうございます

49 :
あるinputが、TYPEが radio か text かを判定したいんだけど
なにで区別すればいいですか?

50 :
>>49
typeだと思う

51 :
>>49
どこで区別するのかによる。

$('input:radio') 要素を選択するならこれ

イベントハンドラで使いたいならば
$(document).on(イベント, 'input:radio', function() {・・・})
というのもあり。

俺はあまりやることはないが、どうしてもイベントハンドラの中で区別したいなら
$( "input" ).on('change', function() {
 if ($(this).is( ":radio" ) ) {
  ・・・
 }
});
とかいうのもありだろうし、isの代わりにthis.type === 'radio' でもいいかもしれない。

52 :
>>50-51
ありがとう。 $unko.attr('type') == 'radio' でできた

53 :
2chでたまにある下品な変数名って何なの?
自分が下劣な人間であることをアピールしてるの?

54 :
痛車に乗っている奴と同じで周囲と自分の感覚のズレに気が付いてないだけだろ
本人は面白いネタを披露しているつもりなのさ
小学生があの単語を連呼して喜んでいるのと同じ

55 :
unko はラテン語で「ひとつの」を意味する単語だし
メタ構文変数としては適切だと思うよ

56 :
意味がある時点でメタ構文変数ではないんだが
https://ja.wikipedia.org/wiki/%E3%83%A1%E3%82%BF%E6%A7%8B%E6%96%87%E5%A4%89%E6%95%B0

57 :
というか、日本語で読めるものを外国語で読む論理なら「nihon は英語では読めないからメタ構文変数」と主張できることになるんだが、明らかにおかしいだろ

58 :
>>5
ものすごく遅くなりましたがみなさん回答ありがとうございました。
助かりました。

59 :
<form action="hoge.php">
<input type="submit" id="send" value="送信">
</form>

$('#send').click(function(){
if (条件) {
(処理)
} else {
return false;
}
});

と、送信でも条件によってフックしてhoge.phpへの移行を
阻止したいのですがこれってどのブラウザでもその通りになりますか?
phpが先に実行される可能性はありますか?

60 :
>>59
DOMを正しく実装しているブラウザであれば期待通りに動きます。
それはそれとして、対象ブラウザ全てで検証するのは基本だと思うのですが。

61 :
>>60
ありがとう。

この方が早いかと一瞬思ったのですが、後々考えたら
普通のボタンにonclickでfunction呼び出した方が見通しがいいかもしれませんね。
私の場合他人が見ることもHTMLだけ見ることもないので
さほどの問題でもないのですが(たぶん)。

62 :
>>61
> 普通のボタンにonclickでfunction呼び出した方が見通しがいいかもしれませんね。
今はonclick属性は一般的に使わない。

あとreturn falseではなく、event.preventDefault()を使うのが標準的なやり方だ。
eventはclickのイベントハンドラの第一引数な。

それからその場合はformのsubmitイベントを捉えたほうが良い。
そうすればthisがformになるからformの中を参照するのが少し楽になる。

ついでだが#sendにイベントハンドラをつけるのではなくdocumentにつけて
#sendで振り分けたほうが良い。僅かなタイミングだが
イベントハンドラが有効にならない期間がある。

要するにこうした方がいいという話だ。

<script>
$(document).on('submit', '#sendform', function(event) {
 if (!条件) {
  event.preventDefault();
  return;
 }
 処理
});
</script>

<form id="sendform" action="hoge.php">
<input type="submit" value="送信">
</form>

63 :
>>62
>event.preventDefault()を使うのが標準的なやり方

これだと何がいいのでしょうか?
イベントの伝播で安全ということでしょうか?

64 :
>>63
バブリングを止めない、という理解でいいんじゃないか

65 :
jqueryプラグインの「mix it up」を使っていて、
さらにプラグイン「jquery.cookie.js」を使ってそれをクッキーに保存させたいと思っています。

`
sample.html
<div class="style1">
 <div>
  <div class="filter style2" data-filter=".a">青</div>
  <div class="filter style2" data-filter=".b">赤</div>
  <div class="filter style2" data-filter=".c">黄</div>
 </div>
</div>
<dl>
 <dd class="sort" data-sort="default">新着順</dd>
 <dd class="sort" data-sort="myorder:desc">価格の高い順</dd>
 <dd class="sort" data-sort="myorder:asc">価格の低い順</dd>
 <dd class="sort" data-sort="random">ランダム</dd>
</dl>
<div class="style3">
 <div class="mix a">青</div>
 <div class="mix b">赤</div>
 <div class="mix c">黄</div>
</div>
`

66 :
`
sample.js
$('.style3').mixItUp({
controls: {
toggleFilterButtons: true,
toggleLogic: 'and',
},
animation: {
duration: 0,
},
});


$('.style2').on('click', function(){
$(this).toggleClass('style2b');
});
`
.style2のタグをクリックすると.style3の記事が絞り込み検索される仕組みです。
.style2をクリックすると同時に.style2bが付与され色が反転し、どのタグが選択されているか目視できるようにしています。
.mixにはdisplay:none;がかかっています。
このクッキーを保存して、ページが更新された場合に絞り込み検索および付与された.style2bが残っている状態にしたいと考えております。
独学で作成していて壁にぶつかっております。どうかご教授お願い申し上げます。

67 :
クッキーに、ページの状態を保存したいの?

絞り込み検索のキーワード・カテゴリ、
style2bが付与されたことを、保存すれば?

68 :
>>67
そうです。
具体的なコードの書き方を教えていただきたいです。

69 :
クッキーの仕様・容量を、調べれば?

データ構造は、[キー : 値] の辞書かな?

70 :
>>69
いろいろと調べてもわからなくてここにたどり着きました。

71 :
ミ〜サビ♪ シ ビア

72 :
document.cookie - MDN
https://developer.mozilla.org/ja/docs/Web/API/Document/cookie

「jquery cookie」で検索すると、jQueryでクッキーを扱える、プラグインが一杯ある

73 :
クッキーはjQueryで扱うべきものじゃない。
なぜならクッキーはDOMとは無関係だから。

それはjQueryが流行って質の悪いjQueryプラグインが大量に
生産されたときの負の遺産。いまどき使うべきじゃない。

「javascript cookie library」でぐぐったらコレが出てきた。
https://github.com/js-cookie/js-cookie

starも多いしこれでいいんじゃね?

74 :
クッキーを扱うjQueryプラグインはjQueryプラグインではなくて
jQueryの名前空間に寄生しているだけ。

75 :
そもそも、今でもクッキーを使うのかな?

今は、WebStorage じゃないの?

76 :
>>75
使うに決まってんだろ脳みそ沸いてんのかクソボケ野郎が

77 :
<div>
 <div>1</div>
 <div>2</div>
 <div>3</div>
 <div>4</div>
 <div>5</div>
</div>
例えばdivのclickイベントで、3がクリックされたときに
その次の4のdivを取得する方法を教えてください。

78 :
>>77
event.target.nextElementSibling

79 :
>>78
すみません、JQだとどうなりますか?

80 :
$(this).next()

81 :
>>79
jQueryでも同じコードを書けるんだが
jQuery#nextとnextElementSiblingは同じ
thisとevent.targetは等価ではない
eventは両方とも同じ

82 :
>>80
ありがとうございました。

83 :
>>81
> jQuery#nextとnextElementSiblingは同じ
同じではないよ。

jQueryの基本的な考え方として0個以上の要素郡に対して処理を実行するという点がある。
これの何が便利かというと動的なページであれば何かの要素が存在しない場合がある。
例えばデータが1ページに収まれば「次へ」ボタンを表示しないとか。

document.getElementById('next')なんて書いているとボタンがなかった
ときにnullになって、それを防ぐためにif文が必要になったりするが、
jQueryの場合は、何も書かずとも#nextが見つからなくても問題ない動きをする。

>>77の場合は5がクリックされた時が問題。nextElementSiblingを使うと要素が
見つからない時nullを返すので、そうならないように条件分岐が必要になる。
大したことじゃないと思うかもしれないが、ifの条件を満たす時と満たさない時で
テストが必要になる。言い換えるとコードが複雑になってる。

> eventは両方とも同じ
違う。jQueryのeventは標準仕様に準拠しつつブラウザ間の互換性を高くしている。
jQueryのeventは改良されたevent

84 :
function func1() {
 return { 'year': 2016, 'month': 10 };
}
こういう関数を使って値を取り出す場合には、一旦objと言う変数に入れて、

var obj = func1();
var year = obj['year'];
var month = obj['month'];

とするのが普通だと思うのですが、もしobjを使わずに

var year = func1()['year'];
var month = func1()['month'];

とするとfunc1()が二回実行されて無駄ですよね?
質問は、一時変数objを使わずに、かつfunc1()も一回だけ実行して
値をyearとmonthに取り出す方法はありますか?
目的は、単なる興味です。

85 :
jQueryの話と関係ないな
あらしかな。

86 :
YouTubeのサイトのように、画面に表示されている所の、画像だけを表示して、
下へスクロールすると、新たに表示された所の画像を、その時に読み込んで表示するのは、
どのように、やっているのでしょうか?

つまり、非同期・遅延読み込み

87 :
>>84
コードの書き方がいろいろおかしい
同じオブジェクトを参照するなら function func1() {
 return { 'year': 2016, 'month': 10 };
}
が不要
year, month も一時変数なので不要

var obj = { 'year': 2016, 'month': 10 };

これだけで良い
これ以上はJSスレで

88 :
質問お願いします。

スライドショーの上に常に違う画像を重ねて表示させたく
https://allabout.co.jp/gm/gc/417216/2/
を参考にしてスライドショーはできたのですが
上に画像を重ねる方法がわかりませんでした。
知恵袋で似てる質問はあったのでチャレンジしてみたのですが
上記のサイトとは違うコードの組み方のようで結局出来ずに終わりました。

ほとんど調べながらコピペしてる状態の初心者なので、初歩的な質問かもしれませんが
もしご存じの方がいらっしゃいましたら教えていただきたいです。
また、解説してるサイト等ありましたら貼っていただけると助かります。

よろしくお願いします。

89 :
>>88
現行スレはこちら

+ JavaScript & jQuery 質問用スレッド vol.6 + [無断転載禁止]©2ch.sc
http://echo.2ch.sc/test/read.cgi/hp/1465566635/

90 :
>>89
ありがとうございます。
そちらで質問させていただきます。

91 :
バージョン1系から3系に入れ替えたら、IE11でローカルファイルを開くとAjaxが動かなくなったけど、
どうすれば良いの?サーバに入れると正常に動作するのに。

92 :
>>91
現行スレはこちら

+ JavaScript & jQuery 質問用スレッド vol.6 + [無断転載禁止]©2ch.sc
http://echo.2ch.sc/test/read.cgi/hp/1465566635/

93 :
画像の遅延ロードってlazyloadでしか無理なの?

94 :
>>93
同等の機能を自分で実装すればいけるよ
昔は自分でやってたもんだ

95 :
現行スレはこちら。

■jQueryスレ
jQuery 質問スレッド vol.7
http://echo.2ch.sc/test/read.cgi/hp/1478055094/

■ライブラリスレ
JavaScript ライブラリ総合質問所 vol.5
http://echo.2ch.sc/test/read.cgi/hp/1465399470/

■JavaScriptスレ
JavaScript の質問用スレッド vol.131
http://echo.2ch.sc/test/read.cgi/hp/1478053599/
JavaScript の質問用スレッド vol.122
http://echo.2ch.sc/test/read.cgi/tech/1472426483/
JavaScript(ECMAScript)質問用スレッド vol.122
http://echo.2ch.sc/test/read.cgi/tech/1472401404/

96 :
jQuery初心者ですが、サイト内で複数のmp3を順に自動再生させたいのですが、
ぐぐって出てきたページに
↓このようなコードがあり、ページ中のボタンを押すと再生が始まる仕組みになっているのですが、
ボタンを押さなくてもページが表示された時点で自動再生されるようにするには一体どうすればいいのでしょうか?

〜冒頭省略〜
$( "#button_play_all" ).click( function () {
var mySources = $( "#media_player" ).children( "source" );
var myAudioPlayer = document.getElementById( "media_player" );
myAudioPlayer.addEventListener( "ended", function () {
〜以下省略〜〜

97 :
>>96 続き・・
<!-- 再生開始ボタン -->
<input id="button_play_all" type="button" value="全ファイル連続で再生" />

<!-- mp3を用意する(HTML5タグ) -->
<audio hidden name="media" preload="auto" id="media_player">
<source src="mp3のファイルパス" type="audio/mp3">
<source src="mp3のファイルパス" type="audio/mp3">
</audio>

ぐぐって出てきたページ↓
https://lightz.info/index.php/view/226?continue=1#continue

98 :
>>96
autoplay 属性というのがある
<audio autoplay …
ただし、ブラウザ設定でブロックされている場合はどうやっても無理だろう(ユーザに強制できない)

99 :
>>98
ありがとうございます。
1ファイルなら簡単に再生できるのですが、複数のファイルを順に再生する方法がわかりません。
サンプルコードではそこが実現できているのですがページ内のボタンをクリックする必要があります。
$( "#button_play_all" ).click( function () {
↑この部分がボタンクリックで実行する制御をおこなっているようですが
ここを省略して以下のコードを実行させるように書く方法がわかりません。

100 :
>>99
autoplay で再生が始まったときのイベントを捕まえて
そのサンプルコードと似たコードを走らす必要があるだろうね

101 :
まさにこれ
http://hayabusa9.2ch.sc/test/read.cgi/news/1497923973/16

ライブラリをネットで探して組み立てるだけ
楽なんだよな

102 :
HPで友達が稼げるようになった情報とか

⇒ http://asaswq3wq.sblo.jp/article/181819223.html

興味がある人だけ見てください。

TQZPQYA2JW

103 :
☆ 日本の、改憲を行いましょう。現在、衆議員と参議院の
両院で、改憲議員が3分の2を超えております。
『憲法改正国民投票法』、でググってみてください。国会の発議は
すでに可能です。平和は勝ち取るものです。お願い致します。☆☆

104 :
誰でもできる在宅ワーク儲かる方法
少しでも多くの方の役に立ちたいです
グーグルで検索するといいかも『金持ちになりたい 鎌野介メソッド』

5OKLJ

105 :
let $div = $('<div>')..append('<span>')

としてからspanにclassを追加したい場合はどうやればいいですか?

106 :
x = (x === 0) ? y : x++;

この書き方間違ってますか?
ifに書き換えたら普通に動くのですが、これはダメでした。

107 :
>>106
x = x++;

108 :
izimodal使ってる人がいたら教えて欲しいんだけど閉じるボタンの色変えるのどこ弄ったら良いですか?
オプションのIconColor設定しても変わらんし、izi Modal.cssでicon関連の色変えてみても反映されないの…

109 :
>>106
やりたいのはこんな感じ?

<!doctype html>
<html>
<head><meta charset=”utf−8”></head>
<body>
<script>
let x = 0;
const y = 5;
console.log(”x: ”+x);
console.log(”y: ”+y);
if (x === 0) {
x = y
} else {
x++;

console.log(”x: ”+x);
if (x === 0) {
x = y
} else {
x++;

console.log(”x: ”+x);
</script>
</body>
</html>

110 :
こうかな

<!doctype html>
<html>
<head><meta charset=”utf−8”></head>
<body>
<script>
let x = 0;
const y = 5;
console.log(”x: ”+x);
console.log(”y: ”+y);
x = (x === 0) ? y : x+1;
console.log(”x: ”+x);
x = (x === 0) ? y : x+1;
console.log(”x: ”+x);
</script>
</body>
</html>

111 :
【要点】

>>106
> x = (x === 0) ? y : x++;
>
> この書き方間違ってますか?

x = (x === 0) ? y : x+1;

112 :
>>109-110
全角読みづらい

113 :
>>112
半角だと投稿できないからな
まともなテキストエディタなら「半角⇒全角」は5秒かからないな

>>111 は読めるよね

114 :
>>113
まともなプログラマなら、jsfiddleやcodepen等の外部サイトを使う

115 :
煽らないと死ぬ病気かあ

116 :
目には目を

117 :
先日、どっかの外部サイトがサービス提供終了になってなかったっけ

118 :
下記のようなtableに対して
<table>
<tbody>
<tr>
<td><input type="checkbox"></td>
<td><input name="tes" value="1"></td>
</tr>
</tbody>
</table>
checkboxをクリックしたら兄弟のinputのvalueを取得したかったのですが下記のコードを試してもvalueは取れませんでした
$('input:checkbox').on('click',function(e)){
var tes = $(this).closest('tr').children('td:eq(1)').val();
});
どう書けば良いかお教え下さい

119 :
Showroom を見るときに、多くのアバターが邪魔なので削除していますが、
要素を削除するのに、一々、その親要素を取得して、親から子要素削除するのは、面倒

var elem = document.getElementById('js-avatar');
elem.parentNode.removeChild(elem);

120 :
ずさん管理 札幌ひばりが丘病院と元薬剤師ら書類送検
https://dai.ly/x6lbwph

121 :
https://i.imgur.com/KhorWvs.jpg

122 :
window.openで新しくタブを開き、input要素に文字を入れたいのですがどうのように刷れば良いでしょうか?
仮にjquery.comの検索ボックスに入力するとして、

var foo = window.open("jquery.com");
foo.$(".ds-input").val(333);

としたら出来ました!!?!?!?
さっきまでは出来なかったんですが・・・すいません
ありがとうございました

123 :
var foo = window.open("jquery.com");foo.$(".ds-input").val(333)
と一行で書くと駄目みたいです
jqeuryが読み込まれていないせいでしょうか

124 :
jQ勉強中です。containsを覚えました。ですが、例えば
$('td:contains("abc")')
という指定をすると、td自体だけでなくその子孫要素のどれか1つにでもabcを含むとマッチしてしまいますが、そうじゃなく、
td要素自体が直接abcというテキストを持っている要素だけにマッチするようにするにはどうしたらいいでしょうか?

125 :
<div class="result"></div>にajaxを使って
.done((data) =>{
  $('.result').html(data);
})
でtableを表示してるのですが、
そのtableをマウスクリックした明細行の情報を取得することは可能ですか?

126 :2020/02/29
すみません、わかる方がいらっしゃれば教えていただけないでしょうか。
<table>
<tr class = '010'> <td>あ</td>い<td>う</td>え<td>お</td> </tr>
<tr class = '010'> <td>か</td>き<td>く</td>け<td>こ</td> </tr>
<tr class = '020'> <td>さ</td>し<td>す</td>せ<td>そ</td> </tr>
<tr class = '010'> <td>た</td>ち<td>つ</td>て<td>と</td> </tr>
<tr class = '010'> <td>な</td>に<td>ぬ</td>ね<td>の</td> </tr>
<tr class = '020'> <td>は</td>ひ<td>ふ</td>へ<td>ほ</td> </tr>
<tr class = '010'> <td>ま</td>み<td>む</td>め<td>も</td> </tr>
<tr class = '030'> <td>や</td>ゆ<td>よ</td>?<td>!</td> </tr>
</table>

【やりたいこと】
「き」のセルをクリックしたら同じclass='010'の中で直後にあたる
「た」行のみ背景色を変えたい。
【困っていること】
以下のようなコードを書いたのですが、当然のことながらclass='010'である
すべての行の色が変わってしまいます。($(this)は「き」の<td>です)
$(this).parent().siblings('.010').css("background-color", "#ffcccc");
これをclass='010'である行の内、「き」の<td>が含まれる列の直後の列に
限定することはできるのでしょうか。

【SEO】Bing対策 パート1【MSN】
カウンター総合スレTotal l0l0l0l0l2l Hit
30hit/day以下の超弱小サイトが互いにリンクしまくるスレ
携帯の自動クリックソフトを使って
_____________________________________________HTA
2ch関連のサイトを作っている管理人いるか? part2
【現役は】漏れも昔は厨ダターヨ…… 2【カエレ!】
【id】どんな名前つけてる?【class】
この野郎スレ第四弾だこの野郎!!
【SEO対策】阿曽鉄之輔 VS 渡辺隆広【SEMリサーチ】
--------------------
アンチの心理
なんJカタン部
【キング】小田急線千歳船橋とその周辺のスロット店【ゴードン】part.11
【軍事】 北朝鮮が警告 「脅威が生じた場合は即時的かつ強力な打撃で対応する」
ビジネス機総合スレ 1
【鹿児島サウナ殺人事件】以前に大扇風機めぐりトラブル、『止めろ』と言い喧嘩に 周囲に「殺してあの世に行きたい」と話す
立花さん「調子乗ってすいません最近の選挙で票全く取れない衆院選では候補減らすわ」
【悲報】ローソン、先月変えたばかりのパッケージデザインをもう変更
【パワハラ】新大阪郵便局その42【無能】
エヴァの公式カプは? LRS VS. LAS ROUND2
【BBC】世界初【テレビ放送】
【スイス】「ムーア人の頭」という名のチョコレート製菓が人種差別的とネットで炎上、スーパーで商品撤去へ ★2 [オクタヴィアス5世★]
【コズミック】immiはエレクトロニカ【ピンク】
カラオケアプリsmule54
【日テレ日22時半】あなたの番です part111【原田知世・田中圭】
【8J】記念局について語ろう【8N】2局目
【鈴木央】七つの大罪ネタバレスレ31 【マガジン】
LEVORG_FANとかいうレヴォーグ乗りYouTuber Part.8
布ナプキンを自作するスレ2
スピリチュアリズム
TOP カテ一覧 スレ一覧 100〜終まで 2ch元 削除依頼