- ベストアンサー
配列の作り方について
知識のある方に是非とも配列の作り方について ご教示いただきたいです。 <ul id="hoge"> <li><a href="#number1">テキスト1</a></li> <li><a href="#number2">テキスト2</a></li> <li><a href="#number3">テキスト3</a></li> </ul> このコードをJqueryで以下のように、 各々のURLとテキストの中身を配列に入れたいのですが どうjqueryを組めば良いかご教示頂けますでしょうか。 [number1,テキスト1] [number2,テキスト2] [number3,テキスト3] 申し訳ございませんが宜しくお願い致します。
- yukiponta
- お礼率53% (62/115)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
<script> var hairetsu = []; $(function() { $('#hoge').find('li > a').each(function(){ hairetsu.push([$(this).attr('href'),$(this).html()]); }); }); </script>
関連するQ&A
- 配列の作り方について
知識のある方に教えて頂きたく存じます。 以下のようにリストが4つあり、これらのアルファベットを 大文字小文字関係なく、アルファベット順にリストを並べ変えたいのですが jqueryでどのようにやればいいかご教示頂けませんでしょうか。 <ul id="hoge"> <li><a href="#number1">C</a></li> <li><a href="#number2">ab</a></li> <li><a href="#number3">AC</a></li> <li><a href="#number4">cb</a></li> </ul> 申し訳ございませんが、 よろしくお願いいたします。
- ベストアンサー
- JavaScript
- jQueryの配列の渡し方について
jQueryでの配列の渡し方についてご質問です。 jQueryではなくjavascriptでも良いのですが、不慣れなのでjQueryで試行しています。 ---------------------------------------------- targettab = targettab.split( ',' ); jQuery.each(targettab, function(i, val) { var livetab = "<li id='" + i + "'>" + val + "</li>"; jQuery(livetab).appendTo(jQuery("ul#tab")); }); ---------------------------------------------- ※変数 targettab に「あああ,いいい,うううう]という値が入っています。 こう↑書きますと、ul#tabの内部に <li id='1'>あああ</li> <li id='2'>いいい</li> <li id='3'>ううう</li> と入り、リストが生成されます。 ここまでは良いのですが、このそれぞれのidに入っている数字を任意の文字列にしたいです。 例えば、 targetstrings = "hoge,foo,dummy"; targetstrings = targetstrings.split( ',' ); という配列を差し込んで、最終的に <li id='hoge'>あああ</li> <li id='foo'>いいい</li> <li id='dummy'>ううう</li> という形で整形したいです。 jQuery.eachでは、そもそもできないような気がしていますが、 お知恵を拝借できましたら、大変ありがたいです。 拙い説明で恐縮ですが、どうぞよろしくお願いします。 不明点などあれば、何なりとお知らせください。
- ベストアンサー
- JavaScript
- jQueryのコードで分からない箇所があります
プログラミング系の勉強を始めたばかりのど素人につき、間抜けな質問かと思いますが、 ご教授いただけますと幸いです。 ※ 以下今回の質問に関連するソースコード ■html <ul class="tab"> <li><a href="#tab1" class="selected">AAA</a></li> <li><a href="#tab2">BBB</a></li> <li><a href="#tab3">CCC</a></li> </ul> <ul class="panel"> <li id="tab1”>…(省略)…</li> <li id="tab2”>…(省略)…</li> <li id="tab3”>…(省略)…</li> </ul> ■jQuery $(function(){ $("ul.panel li:not("+$("ul.tab li a.selected").attr("href")+")").hide() }); ——————————————————— 上記のjQueryのコード内の $("ul.panel li:not("+$("ul.tab li a.selected").attr("href")+")") ↑箇所につきまして、なぜ+(プラス)が２箇所必要なのですか？ $("ul.panel li:not("$("ul.tab li a.selected").attr("href")")") もしくは $("ul.panel li:not($("ul.tab li a.selected").attr("href"))") のように記述するとどうしてエラーになるのでしょうか？ どうぞよろしくお願いいたします(>_<)
- ベストアンサー
- SE・インフラ・Webエンジニア
- アコーディオンパネルで複数のリンクを展開する方法
こんばんわ。Jquery超初心者です。 Jqueryでアコーディオンパネルを実装しようとしているのですが、Jqueryの指定に問題があるようで、 開きません。以下コードです。 (HTML) <ul class="slide"> <li><a href="">窓口業務</a> <ul> <li><a href="">menu 1-1</a></li> <li><a href="">menu 1-2</a></li> <li><a href="">menu 1-3</a></li> </ul> </li> <li><a href="">異動業務</a> <ul> <li><a href="">menu 2-1</a></li> <li><a href="">menu 2-2</a></li> <li><a href="">menu 2-3</a></li> </ul> </li> <li><a href="">検針業務</a> <ul> <li><a href="">menu 3-1</a></li> <li><a href="">menu 3-2</a></li> <li><a href="">menu 3-3</a></li> </ul> </li> <li><a href="">調定業務</a> <ul> <li><a href="">menu 4-1</a></li> <li><a href="">menu 4-2</a></li> <li><a href="">menu 4-3</a></li> </ul> </li> </ul> (JQuery) $(function () { $("ul.slide li ul").hide(); $("ul.slide li").click(function () { $("ul.slide li").each(function () { if ($("ul.slide li").css("display")=="none"){ $("ul.slide li ul"). slideDown(); } else { $("ul.slide li ul").slideUp(); } }); }); }); eachの使い方が間違っているのか、はたまた何か足りない記述があるのか、途方に暮れています。 何かお気づきの方、ご指摘の程宜しくお願い致します。
- ベストアンサー
- JavaScript
- どの<li><a> が押されたか判別したい
<ul id="category"> <li><a href="~~">光熱費</a></li> <li><a href="~~">雑費</a></li> </ul> という様なかたちで家計簿のカテゴリーを作っているのですが どの<li>が押されたかを判別してその押された中身のテキストを取得したい場合には どうすればいいのでしょうか？ <select>なら「selectedIndex」で選択されたメニューの配列番号が取得できると思うのですが、<li>要素の場合には同じようなものがあるんでしょうか？ ちなみに、リスト<li>の個数は固定ではなくて、javascriptでカテゴリーを追加したり削除したり出来る様にしたいと思っています。
- ベストアンサー
- JavaScript
- text-align centerの違い
div内にリンクを書くとセンターを基準に表示されるのですが div内にulとliでメニューを組むとセンターを基準に表示されず 左を基準に表示されてしまうのですがどのようにすれば いいものでしょうか？ ---CSS--- #hoge { width: 1000px; text-align: center; background: #fff; } ---HTML--- ↓この場合センター表示されます。 <div id="hoge"> <a href="#">hoge</a> </div> ↓この場合センター表示されず左を基準に表示されます。 <div id="hoge"> <ul> <li><a href="#">hoge</a></li> </ul> </div>
- ベストアンサー
- HTML
- jQueryで記事を６列表示にしたいのです。
ｊQueryで記事を６列表示にしたいのです。 jQueryで６列表示をしたいと思って試行錯誤をしていたのですが、 全くわからずじまいで、どうしたらいいのかと知恵袋に投稿致しました。 各カテゴリごとに表示をするようになっているのですが、 オールだけ全て表示になります。 ５つ残して表示させればいいのですが、各カテゴリが 消えてしまうので、どうしてもオールは６行表示させたいと思っています。 どなたか助けていただけませんでしょうか？ jQuery ---------------------------------------------- $(document).ready(function() { $('ul#navi a').click(function() { $(this).css('outline','none'); $('ul#navi .all').removeClass('current'); $(this).parent().addClass('current'); var filterVal = $(this).text().toLowerCase().replace(' ','-'); if(filterVal == 'all') { $('ul#portfolio li.hidden').fadeIn('slow').removeClass('hidden'); } else { $('ul#portfolio li').each(function() { if(!$(this).hasClass(filterVal)) { $(this).fadeOut('normal').addClass('hidden'); } else { $(this).fadeIn('slow').removeClass('hidden'); } }); } return false; }); }); HTML ---------------------------------------------- <ul id="navi"> <li class="all"><a href="#">All</a></li> <li><a href="#">CMS</a></li> <li><a href="#">CSS</a></li> <li><a href="#">Javascript</a></li> </ul> <ul id="portfolio"> <li class="cms"><a href="#">Movable Type</a></li> <li class="cms"><a href="#">Movable Type</a></li> <li class="cms"><a href="#">Movable Type</a></li> <li class="css"><a href="#">CSSテンプレート</a></li> <li class="javascript"><a href="#">prototype</a></li> <li class="css"><a href="#">CSSビギナー</a></li> <li class="css"><a href="#">CSSテンプレート</a></li> <li class="css"><a href="#">CSSテンプレート</a></li> <li class="javascript"><a href="#">jQuery</a></li> <li class="javascript"><a href="#">jQuery</a></li> <li class="javascript"><a href="#">jQuery</a></li> <li class="javascript"><a href="#">jQuery</a></li> <li class="javascript"><a href="#">plugin</a></li> </ul>
- 締切済み
- JavaScript
- スマートフォン用サイトのアコーディオンメニュー
スマートフォン用サイトのアコーディオンメニューを作成しています。 http://html-five.jp/140/ こちらのサイト様の情報をもとに2段のメニューが作ろうと思ったのですが、 空白のページが表示されてしまいますが、どこを修正したらよいのかわかりません。 記述したものは下記のとおりです。 解答よろしくお願いいたします。 <head> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css"> <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script> <script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script> </head> <body> <script type="text/javascript"> $(".accordion p").click(function(){ $(this).next("ul").slideToggle(); $(this).children("span").toggleClass("open"); }); </script> <div> <ul> <li> <p><span>LIST 6</span></p> <ul> <li> <p><span>LIST 6-1</span></p> <ul> <li><a href="page01.html">LIST 6-1-1</a></li> <li><a href="page01.html">LIST 6-1-2</a></li> <li><a href="page01.html">LIST 6-1-3</a></li> </ul> </li> <li> <p><span>LIST 6-2</span></p> <ul> <li><a href="page01.html">LIST 6-2-1</a></li> <li><a href="page01.html">LIST 6-2-2</a></li> <li><a href="page01.html">LIST 6-2-3</a></li> </ul> </li> <li> <a href="page01.html">LIST 6-3 (not to open)</a> </li> </ul> </li> <li> <p><span>LIST 7</span></p> <ul> <li> <p><span>LIST 7-1</span></p> <ul> <li><a href="page01.html">LIST 7-1-1</a></li> <li><a href="page01.html">LIST 7-1-2</a></li> <li><a href="page01.html">LIST 7-1-3</a></li> </ul> </li> <li> <p><span>LIST 7-2</span></p> <ul> <li><a href="page01.html">LIST 7-2-1</a></li> <li><a href="page01.html">LIST 7-2-2</a></li> <li><a href="page01.html">LIST 7-2-3</a></li> </ul> </li> <li> <p><span>LIST 7-3</span></p> <ul> <li><a href="page01.html">LIST 7-3-1</a></li> <li><a href="page01.html">LIST 7-3-2</a></li> <li><a href="page01.html">LIST 7-3-3</a></li> </ul> </li> </ul> </li> </ul> </div> </body>
- ベストアンサー
- JavaScript
- ２次元のJSON形式の配列の展開
JSON形式で受け取った２次元配列をHTMLに書き出そうとしています。 配列を指定するカラム名？を変数にしたいのですがうまくできません。 var hoge = "abc"; var len = result.length; for (i = 0; i < len; i++){ objResult.append("<li><a href=" + result[i].ID + ">" + result[i].hoge + "</a></li>"); } ※objResultはul要素を変数に収めたものです。 JSONデータは１列目のカラム名は『ID』で固定ですが２列目は変動する為、上記の『hoge』の部分にはJSONデータを受け取る前にカラム名を別処理で取得して格納しています。 ご教授の程よろしくお願いします。
- ベストアンサー
- JavaScript
- jqueryの構文について
はじめまして、最近jqueryの勉強を始めました。 セレクタを変数で指定した場合の子要素の取得の仕方がわからず、困っています。 アドバイスいただけませんか？ <html> <head> <title></title> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> <script> $(document).ready(function() { $("#next").click(function () { //下のように書いてみたのですが動きません。 var next_slide = $("#slide01").next(); $(next_slide).text("hoge");//これは動きます var img_url = $(next_slide > a).attr("href");//エラーを起こします alert(img_url); return false; }); }); </script> </head> <body> <ul> <li id="slide01"><a href="url01">スライド01</a></li> <li id="slide02"><a href="url02">スライド02</a></li> <li id="slide03"><a href="url03">スライド03</a></li> </ul> <a href="#" id="next">次へ</a> </body> </html> 要は次の要素の子要素にアクセスしたいのです。 ご教授のほどよろしくお願いしますm(_ _)m
- ベストアンサー
- JavaScript
お礼
早々にご連絡いただきありがとうございます！！ 大変たすかりました。ベストアンサーとさせて頂きます！