+ jQuery 質問用スレッド vol.7 + [無断転載禁止]©2ch.net

**Name_Not_Found** · 2016/08/15(月) 22:41:59.07

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

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

**Name_Not_Found** · 2016/08/21(日) 12:29:01.33

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

**Name_Not_Found** · 2016/10/23(日) 12:58:24.02

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>
`

**Name_Not_Found** · 2016/10/23(日) 12:58:58.10

`
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が残っている状態にしたいと考えております。
独学で作成していて壁にぶつかっております。どうかご教授お願い申し上げます。

**Name_Not_Found** · 2016/10/23(日) 23:32:21.63

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

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

**Name_Not_Found** · 2016/10/24(月) 09:18:37.53

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

**Name_Not_Found** · 2016/10/25(火) 01:09:11.78

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

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

**Name_Not_Found** · 2016/10/25(火) 12:00:22.97

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

2016/10/25(火) 13:19:06.41

ミ～サビ♪　シ　ビア

**Name_Not_Found** · 2016/10/25(火) 23:14:10.11

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

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

**Name_Not_Found** · 2016/10/26(水) 02:26:05.03

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

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

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

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

**Name_Not_Found** · 2016/10/26(水) 02:28:09.49

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

**Name_Not_Found** · 2016/10/27(木) 01:20:47.53

そもそも、今でもクッキーを使うのかな？

今は、WebStorage じゃないの？

**Name_Not_Found** · 2016/10/27(木) 12:41:11.64

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

**Name_Not_Found** · 2016/10/28(金) 14:26:24.09

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

**Name_Not_Found** · 2016/10/28(金) 14:46:22.99

>>77
event.target.nextElementSibling

**Name_Not_Found** · 2016/10/28(金) 14:54:33.50

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

**Name_Not_Found** · 2016/10/28(金) 16:34:29.55

$(this).next()

**Name_Not_Found** · 2016/10/28(金) 19:21:48.82

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

**Name_Not_Found** · 2016/10/28(金) 20:14:35.74

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

**Name_Not_Found** · 2016/10/28(金) 21:46:53.73

>>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

**Name_Not_Found** · 2016/10/28(金) 22:35:39.02

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に取り出す方法はありますか？
目的は、単なる興味です。

**Name_Not_Found** · 2016/10/28(金) 23:07:50.54

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

**Name_Not_Found** · 2016/10/29(土) 05:09:40.68

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

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

**Name_Not_Found** · 2016/10/29(土) 08:57:58.22

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

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

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

**Name_Not_Found** · 2016/11/03(木) 08:04:31.06

質問お願いします。

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

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

よろしくお願いします。

**Name_Not_Found** · 2016/11/03(木) 08:18:25.97

>>88
現行スレはこちら

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

**Name_Not_Found** · 2016/11/03(木) 08:31:12.68

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

**Name_Not_Found** · 2016/11/19(土) 13:37:08.41

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

**Name_Not_Found** · 2016/11/19(土) 18:38:14.52

>>91
現行スレはこちら

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

**Name_Not_Found** · 2016/11/26(土) 23:19:51.36

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

**Name_Not_Found** · 2016/11/28(月) 13:30:55.11

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

**Name_Not_Found** · 2016/12/18(日) 12:27:31.41

現行スレはこちら。

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

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

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

**Name_Not_Found** · 2017/06/04(日) 20:49:35.14

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

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

**Name_Not_Found** · 2017/06/04(日) 20:51:23.04

>>96　続き・・

<input id="button_play_all" type="button" value="全ファイル連続で再生" />


<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

**Name_Not_Found** · 2017/06/04(日) 23:44:29.83

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

**Name_Not_Found** · 2017/06/05(月) 00:04:54.08

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

**Name_Not_Found** · 2017/06/05(月) 02:36:34.55

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

**Name_Not_Found** · 2017/06/20(火) 15:56:57.75

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

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

**Name_Not_Found** · 2017/12/12(火) 04:01:58.71

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

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

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

TQZPQYA2JW

**Name_Not_Found** · 2018/02/18(日) 20:15:41.37

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

**Name_Not_Found** · 2018/05/01(火) 22:12:18.40

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

5OKLJ

**Name_Not_Found** · 2018/05/05(土) 17:42:19.13

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

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

**Name_Not_Found** · 2019/02/23(土) 19:36:35.09

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

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

**Name_Not_Found** · 2019/02/23(土) 23:11:58.51

>>106
x = x++;

**Name_Not_Found** · 2019/06/03(月) 16:33:20.18

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

**Name_Not_Found** · 2019/06/05(水) 14:47:29.13

>>106
やりたいのはこんな感じ？

＜！ｄｏｃｔｙｐｅ　ｈｔｍｌ＞
＜ｈｔｍｌ＞
＜ｈｅａｄ＞＜ｍｅｔａ　ｃｈａｒｓｅｔ＝”ｕｔｆ－８”＞＜／ｈｅａｄ＞
＜ｂｏｄｙ＞
＜ｓｃｒｉｐｔ＞
ｌｅｔ　ｘ　＝　０；
ｃｏｎｓｔ　ｙ　＝　５；
ｃｏｎｓｏｌｅ．ｌｏｇ（”ｘ：　”＋ｘ）；
ｃｏｎｓｏｌｅ．ｌｏｇ（”ｙ：　”＋ｙ）；
ｉｆ　（ｘ　＝＝＝　０）　｛
ｘ　＝　ｙ
｝　ｅｌｓｅ　｛
ｘ＋＋；
｝
ｃｏｎｓｏｌｅ．ｌｏｇ（”ｘ：　”＋ｘ）；
ｉｆ　（ｘ　＝＝＝　０）　｛
ｘ　＝　ｙ
｝　ｅｌｓｅ　｛
ｘ＋＋；
｝
ｃｏｎｓｏｌｅ．ｌｏｇ（”ｘ：　”＋ｘ）；
＜／ｓｃｒｉｐｔ＞
＜／ｂｏｄｙ＞
＜／ｈｔｍｌ＞

**Name_Not_Found** · 2019/06/05(水) 14:49:43.58

こうかな

＜！ｄｏｃｔｙｐｅ　ｈｔｍｌ＞
＜ｈｔｍｌ＞
＜ｈｅａｄ＞＜ｍｅｔａ　ｃｈａｒｓｅｔ＝”ｕｔｆ－８”＞＜／ｈｅａｄ＞
＜ｂｏｄｙ＞
＜ｓｃｒｉｐｔ＞
ｌｅｔ　ｘ　＝　０；
ｃｏｎｓｔ　ｙ　＝　５；
ｃｏｎｓｏｌｅ．ｌｏｇ（”ｘ：　”＋ｘ）；
ｃｏｎｓｏｌｅ．ｌｏｇ（”ｙ：　”＋ｙ）；
ｘ　＝　（ｘ　＝＝＝　０）　？　ｙ　：　ｘ＋１；
ｃｏｎｓｏｌｅ．ｌｏｇ（”ｘ：　”＋ｘ）；
ｘ　＝　（ｘ　＝＝＝　０）　？　ｙ　：　ｘ＋１；
ｃｏｎｓｏｌｅ．ｌｏｇ（”ｘ：　”＋ｘ）；
＜／ｓｃｒｉｐｔ＞
＜／ｂｏｄｙ＞
＜／ｈｔｍｌ＞

**Name_Not_Found** · 2019/06/05(水) 14:53:34.57

【要点】

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

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

**Name_Not_Found** · 2019/06/05(水) 18:16:49.43

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

**Name_Not_Found** · 2019/06/05(水) 18:22:48.19

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

>>111 は読めるよね

**Name_Not_Found** · 2019/06/06(木) 08:27:37.48

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

**Name_Not_Found** · 2019/06/06(木) 14:05:05.55

煽らないと死ぬ病気かあ

**Name_Not_Found** · 2019/06/06(木) 18:51:03.28

目には目を

**Name_Not_Found** · 2019/06/08(土) 12:57:38.01

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

**Name_Not_Found** · 2019/06/19(水) 19:47:26.91

下記のような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();
});
どう書けば良いかお教え下さい

**Name_Not_Found** · 2019/07/28(日) 06:54:08.31

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

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

**Name_Not_Found** · 2019/07/28(日) 09:21:15.51

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

**Name_Not_Found** · 2019/07/30(火) 00:04:58.05

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

**Name_Not_Found** · 2019/09/02(月) 21:37:41.12

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

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

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

**Name_Not_Found** · 2019/09/02(月) 21:43:15.45

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

**Name_Not_Found** · 2019/10/02(水) 14:18:17.64

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

**Name_Not_Found** · 2020/02/01(土) 11:30:43.67

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

**Name_Not_Found** · 2020/02/29(土) 22:05:16.62

すみません、わかる方がいらっしゃれば教えていただけないでしょうか。

<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>が含まれる列の直後の列に
限定することはできるのでしょうか。

**Name_Not_Found** · 2020/07/24(金) 07:06:56.94

そもそも「き」はテキストノードでtd要素になってない。htmlから勉強しなおしてください。

**Name_Not_Found** · 2020/07/24(金) 11:49:34.74

半年経ってやっと回答付いてるｗｗ

**Name_Not_Found** · 2022/08/19(金) 00:59:08.21

すんませんjQueryの質問なんやけど
eachでliタグの子要素のimgタグを取得してalt属性を追加して値はliタグの子要素のemタグのテキストにしたいんだが

全部のliタグの子要素のemタグのテキストを追加してしまう
対応するliタグの子要素のemタグのテキストをそれぞれ追加したいんや！
おせーてくれ！！たのんます！！

**Name_Not_Found** · 2022/08/19(金) 13:26:40.78

li タグの子の、img タグのalt 属性に、
同じliタグの子の、em タグのテキストを設定する

<li><img src="a.jpg"><em>あい</em></li>
<li><img src="b.jpg"><em>abc</em></li>

$( function ( ) {
$( 'li' ).each( function( ) {
const that = $( this );
that.children( 'img' ).attr( 'alt', that.children( 'em' ).text( ) );
} );
} );

結果
<img src="a.jpg" alt="あい">
<img src="b.jpg" alt="abc">

**Name_Not_Found** · 2022/09/21(水) 13:20:03.39

生のDOMを取得するときには
$("#unko")[0]
ってやるけど、これって正式な手順なの？それとも有名な裏技扱い？
DOM取得メソッドって存在するっけ？

**Name_Not_Found** · 2022/09/23(金) 05:29:27.82

>$("#unko")[0]

単に、これじゃダメなのか？
abc クラスが2つ以上あればダメだけど、1つならどう？

const abc = $( '.abc' );

**Name_Not_Found** · 2022/09/23(金) 10:38:05.31

.get(0)

**132** · 2022/09/24(土) 00:37:46.06

>>132
修正

>const abc = $( '.abc' );
これはダメでした！

やっぱり以下のように、インデックスも必要でした
const abc = $( '.abc' );
abc[0]

**Name_Not_Found** · 2022/10/26(水) 18:08:48.79

bxsliderとlightboxを組み合わせて使うと、
lightboxのグループ化がバグって同じ内容が２つずつ表示されてしまうのですが、
回避方法は無いでしょうか。。。

**Name_Not_Found** · 2022/12/01(木) 22:49:59.10

jQueryをマスターしたいので、おすすめの解説書を教えて下さい。