jQueryのeqで最後からn番目以降を指定したい
- 画面読込時の処理上、「最後から2番目以降を先頭に追加」という処理をしたく、jQueryの”.eq()”で上手く表現できないでしょうか。
- 最後からn番目を指定する場合は、.eq(-n)とあり、末端は-1となっていたので、.eq(-2)としましたが、上手くいきませんでした。
- 上手くいかなかったので、仕方なく$li.eq(-2)と$li.eq(-1)をそれぞれ実行していますが、もっとシンプルな方法はありませんか?
- ベストアンサー
jQueryのeqで最後からn番目以降を指定したい
画面読込時の処理上、「最後から2番目以降を先頭に追加」という処理をしたく、jQueryの”.eq()”で上手く表現できないでしょうか。 ”最後からn番目”を指定する場合は、.eq(-n)とあり、末端は-1となっていたので、.eq(-2,-1)としましたが、上手くいきませんでした。 こんな記述をしました。 var $li = $('li','ul#id名'); $('ul#id名').prepend($li.eq(-2,-1)); これでは上手く行かなかったので、仕方なく $('ul#id名').prepend($li.eq(-2)); $('ul#id名').prepend($li.eq(-1)); としましたが、なんかカッコ悪いですよね。。。一発で追加でるようなやり方ないですかね。
- webama_fk
- お礼率91% (117/128)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 (2)
- 専門家の回答
質問者が選んだベストアンサー
A No1です。 >要素が先頭へ移動することは見受けられませんでした。。。 一応、fx27とie8で確認したのですが… 念のため、テストしたHTML全文を載せておきます。 こちらの環境では下の二つ(5番、6番)が先頭に行きます。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>test</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $("#hoge p:gt(-3)").prependTo("#hoge"); }); </script> </head> <body> <div id="hoge"> <p>1番目 <p>2番目 <p>3番目 <p>4番目 <p>5番目 <p>6番目 </div> </body> </html>
その他の回答 (1)
- fujillin
- ベストアンサー率61% (1594/2576)
自分自身の順序を変更するので、jQueryの内部の処理によってはどうなるのか不明なところがありますが・・・ 手持ちのブラウザで試してみたところ、 $("#hoge p:gt(-3)").prependTo("#hoge"); <div id="hoge"> <p>1番目 <p>2番目 <p>3番目 <p>4番目 <p>5番目 <p>6番目 </div> でそれらしい結果になりますが、ちゃんと調べたわけではありませんので、ご自身で確認なさってください。
お礼
fujillin 様 回答ありがとうございます。 お教え頂きました手法でトライしましたが、要素が先頭へ移動することは見受けられませんでした。。。
関連するQ&A
- jQuery eqメソッド 【eq】とは何の略?
jQuery のeqメソッドの学習に入りました。 おおよそ使い方はわかりましたが [eq]とは何の略ですか? ざっと検索してみたのですが出てきませんでした。語源がわからないと何かすっきりしませんl ご存知の方いらっしゃいましたら教えて下さい。宜しくお願いします。 <ul> <li>インデックス0</li> <li>インデックス1</li> <li>インデックス2</li> (赤色になる) </ul> $('li').eq(2).css('color','red'); ↑
- ベストアンサー
- JavaScript
- jQueryで複数あるUL要素の最後のLI要素以外を処理したい
jQueryで複数あるUL要素の最後のLI要素以外を処理したい 現在、HTMLを <ul> <li>foo</li> <li>bar</li> <li>com</li> </ul> <ul> <li>foo</li> <li>bar</li> <li>com</li>(※) </ul> 上記のように記述しています。 今回、jQueryを使い、2カ所あるUL要素の最後のLI要素以外を処理したいと思い、 $(function(){ $("ul li:not(:last)").css("~","~"); }); 以上のようにjQueryを記述したところ、1カ所目の最後のLI要素は無視されCSSが追加されてしまいました。 1カ所目・2カ所目とも同じように処理するにはどうしたら良いでしょうか? ご指導・ご鞭撻のほど、よろしくお願いします。
- ベストアンサー
- AJAX
- JavaScript多重ループを使ったHTML生成
JavaScriptで以下のようなHTMLを生成したいと考えています。 <li>を任意の数で繰り返し処理して生成し、 さらにそれを任意の数で繰り返し処理して生成した<ul>に 紐づけるようにしたいと考えています。 <div id="index"> <ul> <li><div></div></li> <li><div></div></li> <li><div></div></li> ↓ <li>任意の数で繰り返し </ul> <ul> <li><div></div></li> <li><div></div></li> <li><div></div></li> ↓ <li>任意の数で繰り返し </ul> ↓ <ul>任意の数で繰り返し </div> 以下のようなスクリプトをjQueryを使って書いてみましたが、うまくできませんでした。 アドバイスいただけると大変助かります。 よろしくお願いいたします。 (function(x, y) { var i = 0, j = 0, x = x, y = y; var index = $("#index"); while(j < y) { var ul = $("<ul>"); ul.appendTo(index); while(i < x) { var li = $("<li>"); var div = $("<div>"); div.appendTo(li); li.appendTo(ul); i++; } j++; } })(5, 5);
- 締切済み
- JavaScript
- jQueryでリストを分割してページ送りを表示
現在、以下の内容でリストを分割してページ送りで切り替えられる様にしています。 [jQuery] $(function() { var item = $('#list li').length; var i = 0; while (i < item){ var group = i * 10; var num = group + 10; for (var j = group; j < num; j++) { $('#list li').eq(j).addClass('num'+(i+1)); } i++; } /* Pagenation */ $('#list').after('<ul id="nav"></ul>') var lastrep = $('#list li:last').attr('class').replace(/no/i,''); var lists = ""; for (var i = 0; i < lastrep; i++) { lists += '<li class="page-count">'+( i+1 )+'</li>\n'; } $("nav").append(lists); /* First View */ $('#list li').hide(); $('#list .no1').show(); $('#nav li').eq(0).addClass('current'); /* Click */ $('#nav li').click(function () { var items = $(this).parent().children().index(this); var setitems = items +1; $('#list li').hide(); $('#list .no'+setitems).show(); $('#nav li').removeClass('current'); $(this).addClass('current'); }); }); [html] <ul id="nav"> <li class="page-count current">1</li> <li class="page-count">2</li> <li class="page-count">3</li> <li class="page-count">4</li> </ul> <ul id="list"> <li class="no1">item</li> <li class="no1">item</li> ... <li class="no4">item</li> </ul> このページネーションの部分を次の様にするにはどうしたら良いでしょうか…? [html] <ul id="nav"> <li class="page-count">Prev</li> <li class="page-count">Next</li> </ul> <div class="count"><span class="now">1</span>/<span class="total">4</span></div>
- ベストアンサー
- 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
- リストの最後にクラス名を追加したい
javascriptでリストタグ(li)の最後にクラス名を追加するにはどうしたらいいか教えて下さい。 htmlはこんな感じです。 <ul id="sample"> <li>リスト1</li> <li>リスト2</li> <li>リスト3</li> </ul> よろしくお願い致します。
- ベストアンサー
- JavaScript
- jQueryタブメニュー内、パネル間のリンク方法。
javascript勉強中です。 立て続けに質問してしまい、ご迷惑おかけしておりますが協力していただければ幸いです。 下記のjQueryタブメニューですが、パネル内から他のパネルへのリンクを実装するには、どのように書いたらいいか教えていただけないでしょうか。例としてtest1のリンクからtab2へ行くように、です。 (下記実装されている機能は、タブメニューと他のページからのタブへのダイレクトリンクです。) <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript"> jQuery(function($){ $(".area").hide(); var tabs = $(".tab01 li"); tabs.click(function(){ var i = tabs.removeClass("active").index(this); tabs.eq(i).addClass("active"); $(".content .area").hide().eq(i).fadeIn(400); return false; }); var hash = window.location.hash.match(/#tab(\d+)/); hash = hash?(tabs.eq(hash[1]-1).length?hash[1]-1:0):0; tabs.eq(hash).click(); }); </script> </head> <body> <div id="tabs"> <ul class="tab01"> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> </ul> <div class="content"> <div class="area" id="tab1"><a href="#tab2">test1</a></div> <div class="area" id="tab2">test2</div> <div class="area" id="tab3">test3</div> </div> </div> </body> </html> 何卒宜しくお願い申し上げます。
- ベストアンサー
- JavaScript
- jqueryの質問です
jqueryで .tes01と.tes02は同じ番目をセットと考え .tes01 の画像をクリックした時に .tes02のリンクをクリックした状態にしたいと思っています。 .tes02のURLの取得は出来たのですがそれ以降が出来ないので教えてもらえますでしょうか。 $(function(){ $("ul.tes01 li").click(function(){ var tes01li = $(this).index(); var tes02li = $(".tes02 li").find("a").eq(tes01li).attr("href"); tes02li.click(); }); }); <ul class="tes01"> <li><img src="img01"></li> <li><img src="img02"></li> <li><img src="img03"></li> <li><img src="img04"></li> </ul> <ul class="tes02"> <li><a href="#link01">link01</a></li> <li><a href="#link02">link02</a></li> <li><a href="#link03">link03</a></li> <li><a href="#link04">link04</a></li> </ul>
- ベストアンサー
- JavaScript
- jquery tab要素に文字列追加
jqueryのタブ要素にinnerhtmlで文字列を挿入したいのですが、なぜかどのような文字列を挿入しても 先頭に"undefined"の文字が挿入されてしまいます。 この文字列が入らないようにするにはどのようなコードを書く必要があるのでしょうか? ご教授お願いします。 コード例は下に記載させて頂きました。 <div style='clear:both;' id="tabdemo1"> <ul> <li><a href="#ex1">ex1</a></li> <li><a href="#ex2">ex2</a></li> </ul> <div id="ex1"> </div> <div id="ex2"> </div> </div> var html; html="Hello world"; document.getElementById("ex1").innerHTML += html;
- 締切済み
- JavaScript
- jQueryでリスト項目の表示・非表示を切りかえる
jQueryに詳しい方教えてください。 下記のようなHTMLがあって、 jQueryを使って<li>要素の表示/非表示を切り替えたいのです。 ---------------- HTMLスクリプト <ul class="test"> <li>項目1</li> <li>項目1</li> <li>項目1</li> </ul> 切り替えるタイミングはxmlのデータ内にflagを立てています。 flagの値は取得できました。(確認済み) 仕様としては、flagの値が 0の時は→<li>要素の1つ目と2つ目を表示させる。 1の時は→<li>要素の3つ目のみを表示させる。 2の時は→<li>要素のすべてを表示させる。 ということをしたいのです。 ですが、なぜかうまくいきません。 以下のように書きました。 if(flag==0){ $(".test li:eq(2)").hide(); }else if(settlementflag==1){ $(".test li:eq(0)"), .test li:eq(1)").hide(); }else if(settlementflag==2){ //何もしない }; そもそもこうゆう書き方で合っているのしょうか? jQueryを勉強したてで、恥ずかしいばかりですが、 ご教授のほど宜しくお願いいたします。
- ベストアンサー
- AJAX
お礼
ソースまで書いて頂きありがとうございます。確認してみます。
補足
fujillin 様 どうやらjQueryのバージョンが低い(ver1.7を使用しておりました)ためのようでした。