- 締切済み
<li>タグの順番を入れ替える方法
<ul> <li id="category-125" class="category"> <li id="category-123" class="category"> <li id="category-126" class="category"> <li id="category-124" class="category"> </ul> この様なリストが有った場合 jQueryなどで順番を <ul> <li id="category-124" class="category"> <li id="category-126" class="category"> <li id="category-125" class="category"> <li id="category-123" class="category"> </ul> この様に入れ替える事はできるでしょうか？ <li>はphpにより生成されているらしく直接順番を変えることができませんでした。 IDの数字を元に昇順、降順に順番を変えるソースは見つけたのですが IDの数字がランダムの場合どのようにすれば良いかわかりませんでした。 どなたかご教示いただけましたら幸いでございます。 どうぞ宜しくお願い申し上げます。
- dezadezadeza
- お礼率25% (1/4)
- JavaScript
- 回答数2
- ありがとう数0
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- CyberCypher
- ベストアンサー率73% (39/53)
wordpressでしょうか？ javascriptで変更可能ですが、出来ることならPHPのコードを触ることをお勧めします
- fujillin
- ベストアンサー率61% (1594/2576)
ご質問から規則性が読取れないので、そのままということで… var ul = $("#category-125").parent(); ul.append($("li", ul).eq(2)).append($("li:lt(2)", ul)); 順序で入替えているので、idはul要素を特定するためにだけ使用しています。
関連するQ&A
- <ul><li></li></ul>にするメリットって？
<ul><li></li></ul>にするメリットって？ こんにちは。お世話になっています。 色んな方のソースを見ていると、 例えば 「ABOUT」「SERVICE」「COMPANY」・・・という項目を並べる際に <ul> <li id="about">ABOUT</li> <li id="service">SERVICE</li> <li id="company">COMPANY</li> </ul> という風にリスト化する方が多いと思うのですが中には <div id="contents"> <div class="about">ABOUT</div> <div class="service">SERVISE</service> （略） </div> という風にdivで括る方もいると思います。 （※私はdivで括るタイプです。） また。 <dl id="contents"> <dt class="about">ABOUT</dt> <dt class="service">SERVICE</dt> （略） </dl> という風に<dl><dt></dt></dl>括る方もいると思います。 それぞれのメリットってなんでしょうか？ 特に<ul><li></li></ul>という風に括ってる方がおおいと思うので <ul><li></li></ul>にするメリットが知りたいです。
- 締切済み
- HTML
- JQueryで、liタグの背景に色を付けたい。
JQueryで、各liタグに背景色を付けたいのですが、 上手くいきません。多分clickあたりで間違ってると思うのですが・・・。 そもそも、clickの後ろには、functionを書けばいいのか？(以下ソースと同じ) それとも$だけなのか、概念がはっきり分かってません。 書き方等の解説をしてくれているページはないでしょうか・・・。 いろいろ調べてみたのですが、こうかけば動く。見たいな事しか書いてなくて 基本があやふやになっております。 ご教授お願いします。 ====以下ソース==== <html> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8"> <title>jQueryテスト</title> <script type="text/javascript" src="../jquery-1.7.1.min.js"></script> <script type="text/javascript"> $(function(){ $("input:button").click(function('#list'){ .find('li.high').css('backgroundColor', 'red').end() .find('li.middle').css('backgroundColor', 'green').end() .find('li.low').css('backgroundColor', 'blue'); }); }); </script> </head> <body> <ul id="list"> <li class="high">a</li> <li class="middle">b</li> <li class="low">c</li> </ul> <form> <input type="button" value="背景変更"> </form> </body> </html>
- ベストアンサー
- JavaScript
- <li>タグのクリックされたテキストを取得する方法
HTMLのリストの要素をクリックされた時にそのテキストを取得する方法が知りたいです。 取得したテキストを別枠に表示したいです。 jqueryを利用せずjavascriptのみで実装する事は可能でしょうか？ <ul> <li>文字１</li> <li>文字２</li> <li>文字３</li> </ul>
- 締切済み
- JavaScript
- liの並び順の変更
javascriptを使用してliの並び順の変更を考えています。 例) <ul class="c"> <li class="a">りんご</li> <li class="a">バナナ</li> <li class="b">トマト</li> <li class="a">カキ</li> </ul> 上記の様に複数のclassがaのliと1つだけのclassがbのliがあります。 class="b"が最後ではなかった場合、最後のliとその一個前のclass="b"のliを交換したいと考えています。 class="b"にはイベントが指定してありますので、削除して作り直しはできません。 この場合、最後の二つを入れ替えるロジックが良く分かりません。 javascriptコードでも、jqueryライブラリを使用してもどちらでも構いません。 if($(".c").find("li").filter(":last").attr('class') != 'b') でbかどうかの判定はできそうですが、その後の入れ替えが良く分かりません。 <ul class="c"> <li class="a">りんご</li> <li class="a">バナナ</li> <li class="a">カキ</li> <li class="b">トマト</li> </ul> とするにはどうすればいいでしょうか？ よろしくお願いいたします。
- ベストアンサー
- JavaScript
- どの<li><a> が押されたか判別したい
<ul id="category"> <li><a href="~~">光熱費</a></li> <li><a href="~~">雑費</a></li> </ul> という様なかたちで家計簿のカテゴリーを作っているのですが どの<li>が押されたかを判別してその押された中身のテキストを取得したい場合には どうすればいいのでしょうか？ <select>なら「selectedIndex」で選択されたメニューの配列番号が取得できると思うのですが、<li>要素の場合には同じようなものがあるんでしょうか？ ちなみに、リスト<li>の個数は固定ではなくて、javascriptでカテゴリーを追加したり削除したり出来る様にしたいと思っています。
- ベストアンサー
- JavaScript
- UL、LIタグの黒丸なしのリスト
お世話になります。 以下のソースを IEで見ると黒丸なしリストと黒丸ありリストになるのですが FireFoxですと、どちらのリストも黒丸ありのリストになります。 ・これはIEのバグになるのでしょうか？ ・IE・FireFoxともに黒丸なしのリストにしたい場合UL、LIタグで出来ますでしょうか？ ご存知でしたら、申し訳ありませんがご教授よろしくお願いいたします。 <html> <title>ULタグテスト</title> <body> 黒丸なしリスト <ul style="width:150px;"> <li>list1</li> <li>list2</li> <li>list3</li> </ul> 黒丸ありリスト <ul> <li>list4</li> <li>list5</li> <li>list6</li> </ul> </body> </html>
- ベストアンサー
- HTML
- タグ内にあるタグに影響させないイベントハンドラの使い方は？
次のようなHTML文の部分があった場合に於いて、最外部に設置したイベントハンドラを、内部にあるタグに対して無効にするにはどうしたらよいのでしょうか？ 具体的にはid="t1"なるul要素以外の内部の各要素上（liやa等）におけるonmouseoutを無効にするには、どうしたらよいのでしょうか？ 最外部のul要素からマウスがoutした時だけ或るイベントを発生させ、かつul内部の各要素からマウスがoutされた時には、そのイベントを発生させないようにするにはどうしたらよいのでしょうか？ <ul id="t1" onmouseover="func1()" onmouseout="func2()"> <li class="level1">なんたらかんたら <ul id="t2"> <li class="level2">○○<a>△△</a></li> <li class="level2">××<a>▽▽</a></li> </ul> </li> <li class="level1">かんたらなんたら</li> <li class="level1">・・・・・・・・</li> </ul>
- ベストアンサー
- JavaScript
- カレントページ aタグではなく、liに「activ
カレントページ aタグではなく、liに「activeクラス」を付与したいのですが、 どうすれば良いでしょうか？ var URL = window.location.pathname; $('ul#gnavi li a').each(function() { linkURL =$(this).attr("href"); if ( URL == linkURL ){ //$('ul#navi li').addClass('active"');//これだと全部activeになる //$(this).addClass('active');//これだとaがactiveになる } ナビ階層としては、＜ul＞＜li＞の中に、さらに＜ul＞＜li＞があります 一番外側のulにはid「gnavi」を付与しています できれば、両階層とも「activeクラス」を付与したいのですが、 難しければ、とりあえず、中にある階層のliタグに「activeクラス」を付与したいです jQueryを利用しようとしていますが、普通のjsで出来るのなら、そちらでやりたいです (jQueryでもいいです)
- ベストアンサー
- JavaScript
- CSS で li を float させる方法
リスト項目を横並びにfloatさせたいいんですが、 li {list-style:none url(../image/icon/article.png) inside;} と指定すると、floatできないようです。 どうすればlist-styleを指定したliをfloatさせることできますか？ コートは以下のようにしています。 よろしくお願いします。 【HTML】 <div class="YYY"> <ul> <li class="movie"><a href="">MOVIE</a></li> <li class="photo"><a href="">PHOTO</a></li> </ul> </div> 【CSS】 .YYY {margin:10px 0;} .YYY ul {margin:0px;padding:0px;} .YYY li.photo {float:left;list-style:none url(photo.png) inside;} .YYY li.movie {float:left;list-style:none url(article.png) inside;}
- ベストアンサー
- HTML
- Jquery タブで、４つのliのうち、ひとつだけ除外
お世話になります。あともう少しのところでうまくいきません！ http://papermashup.com/demos/jquery-tabs/ 上記を使ってタブをやっています 【html】 <div id="test"> <ul> <li class="menu01"><a href="#tab-1">タブ１</a></li> <li class="menu02"><a href="#tab-2">タブ2</a></li> <li class="menu03"><a href="#tab-3">タブ3</a></li> <li class="menu04"><a href="/test/">こいつだけ違うページへ</a></li> </ul> <div id="tab-1">タブ1の中身</div> <div id="tab-2">タブ2の中身</div> <div id="tab-3">タブ3の中身</div> </div> 【Jquery】 <script type="text/javascript"> $(document).ready(function(){ $('#topserch div').hide(); $('#topserch div:first').show(); $('#topserch ul li:first').addClass('active'); $('#topserch ul li a').click(function(){ $('#topserch ul li').removeClass('active'); $(this).parent().addClass('active'); var currentTab = $(this).attr('href'); $('#topserch div').hide(); $(currentTab).show(); return false; }); }); </script> まずこのままだ４つ目のリンクはまったく動きません。 そこで、return false;を取ると、当然変な動きになります。 <li class="menu04"><a href="/test/">こいつだけ違うページへ</a></li> をクリックした時だけ、普通に別のページにジャンプさせるにはどうしたらよいのでしょうか？
- ベストアンサー
- JavaScript
