質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.62%

  • JavaScript

    15864questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    6521questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

【子要素の指定方法?】jQueryをプレーンなJavaScriptで使う方法

解決済

回答 4

投稿

  • 評価
  • クリップ 0
  • VIEW 335

helloman

score 18

現在簡単なスライダーを製作中で、
jQueryでの実装はできたのですが、プレーンなJavaScriptで書こうと挑戦するとエラーが出てしまいました。

「li.activeの次の要素があれば取得して、なければ最初に戻る」部分のコードなのですが、
「Uncaught TypeError: t.queryAll is not a function」というエラーが出てしまします。

var $active = $('#slide li.active');
var $next = $active.next('li').length ? $active.next('li') : $('#slide li:first');

上記jQueryをプレーンなJavaScriptでの記述方法を考え中です。

var doc = document;
var slide = doc.getElementById('slide');
var childs = slide.querySelectorAll('li');
var $active = slide.querySelector('.active');
var $next = $active.queryAll('~ li').length ? $active.nextElementSibling : childs[0];

slide.querySelector('.active')の部分がうまく取れてないようなのですが、
行き詰まってしまいました。

よろしくお願いします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 4

checkベストアンサー

+2

queryAll の誤字は修正頂けたので、残る問題はここですね。

var $next = $active.queryAll('~ li').length ? $active.nextElementSibling : childs[0];

~ はコンテキストノードをルートとした相対的なセレクタを指定することを意図していると思われますが、そのような書き方は出来ません。
~ は2つのセレクタを繋ぐ結合子であり、先頭に指定することは出来ません。

このようなケースを想定して、Selectors Level 4 では :scope が用意されていますが、まだ実用段階にはありません。

<ul id="slide">
  <li>a</li>
  <li class="active">b</li>
  <li>c</li>
  <li>d</li>
  <li>e</li>
</ul>

<script type="text/javascript">
'use strict';
var slide = document.getElementById('slide');
var childs = slide.querySelectorAll('li');
var active = slide.querySelector('.active');
var next = active.querySelectorAll(':scope~li').length ? active.nextElementSibling : childs[0];
</script>

現実的には下記コードになるであろうと思います。

var next = active.nextElementSibling || childs[0];

ところで、セレクタの相対指定は jQuery でも未対応だったと思うのですが、なにがしかの方法が存在したでしょうか。
現状、セレクタ的な文法で相対指定をしようとしたら、XPath ぐらいしか私は思いつきません。

Re: helloman さん

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/09/06 15:52

    どこのサイトか忘れましたが、理解せずコピペで使ってました。m_ _m
    jQueryで言う.next()がしたかった結果でした。

    キャンセル

  • 2017/09/06 15:56

    http://qiita.com/tatesuke/items/b9548dd484b01b139b74 を参照する事をお勧めします。
    日本語訳で間違った説明が一部にありますが、合わせてコメントを参照して下さい。

    キャンセル

+2

まずはqueryAll の箇所をquerySelectorAll にするところから

 sample

一応sampleつけておきます
.aciveをつけたりはずしたり、別のところにつけたりして確認してみて下さい

<script>
window.onload=function(){
  var n1=document.querySelector("#slide").querySelectorAll("li");
  var n2=document.querySelector("#slide").querySelector("li.active");
  var v=(n1==null || n2==null)?"no active":(n2.nextElementSibling||n1[0]).innerHTML;
  console.log(v);
};
</script>
<ul id="slide">
<li>test1</li>
<li>test2</li>
<li class="active">test3</li>
<li>test4</li>
<li>test5</li>
</ul>

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/09/06 15:13

    サンプルありがとうございます。
    ちょっと挑戦してみます。

    キャンセル

+1

querySelectorAllを利用するのであれば、
細切れに利用するのではなく

var $active = slide.querySelector('#slide li.active');
でいけるんじゃないですかね(多分)
ツリー構造側明確であれば、以下を組み合わせた方が良さそうに思います(速度的に)
getElementById
getElementsByClassName

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/09/06 15:13

    参考にさせていただきます。

    キャンセル

+1

.querySelectorAll()NodeListを返しますので、.querySelector()メソッドを直接使うことはできません。.forEach()メソッドなどを介してください。
NodeList.prototype.forEach() - Web APIs | MDN

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/09/06 14:47

    あ、違うんですね。コードを読み違えました、失礼しました。
    え、でも、それでいいのかな?

    キャンセル

  • 2017/09/06 14:50

    ああ、いいんですね。重ね重ね失礼をいたしました。

    キャンセル

  • 2017/09/06 15:14

    ありがとうございます。
    入り口がjQueryだったので苦戦中です。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.62%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • JavaScript

    15864questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    6521questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。