ベストアンサー

※ ChatGPTを利用し、要約された質問です（原文：jqueryのsortableで一部ソート禁止に）

jqueryのsortableで一部ソート禁止にする方法

2013/02/24 12:15

このQ&Aのポイント

jqueryのsortableで一部要素をソート禁止にする方法をご教示ください。
ソート可能な要素とソート禁止な要素を指定する方法を知りたいです。
一部ソート禁止の動きを実現するためにはどのような処理が必要ですか。

susan-styl
お礼率86% (181/210)

JavaScript
回答数1
ありがとう数1

みんなの回答 （1）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

yuu_x
ベストアンサー率52% (106/202)

2013/02/24 22:51 回答No.1

$( '#sortarea ul' ).sortable({cancel : '.stop'});

質問者

お礼 2013/02/26 22:18

助かりました！ありがとうございます！！

関連するQ&A

jquery sortableについて

２つのsortable要素があり、リスト１の特定の要素のみリスト２に移動できるようにできないでしょうか？下記のlist1のアイテム2のみlist2へ移動でき、アイテム１・アイテム３はlist1内でソートのみ。 <ul id="list1"> <li>アイテム1</li> <li>アイテム2</li> <li>アイテム3</li> </ul> <ul id="list2"> <li>アイテム4</li> <li>アイテム5</li> <li>アイテム6</li> </ul> $("#list1").sorable(); $("#list2").sorable();
sortable ギブアップです…助けてください！

お世話になっております。もぅどうしようもなくてギブです。御存じの方、お助けください。 Jqueryの【UI sortable】でドラッグ＆ドロップで並べ替え。その並び順をＤＢに保存したいと考えています。 ●ドラッグで並べ替えは出来ました！ ●ＤＢに保存が出来ません…( T T ) 呼んでいるモノ------------------------------------------- <link rel="stylesheet" href="themes/base/jquery.ui.all.css"> <script type="text/javascript" src="jquery-1.8.0.min.js"></script> <script type="text/javascript" src="jquery-ui-1.8.23.custom.min.js"></script> javascriptの記述----------------------------------------- <script> $(function() { $(".sortable").sortable(); $(".sortable").disableSelection(); $("#submit").click(function() { var result = $(".sortable").sortable("toArray"); $("#result").val(result); $("form").submit(); }); }); </script> <script>  </script> ------------------------------------------------------ MySQL…5.0.8 ＰＨＰ…5 MySQL------------------------------------ テーブル名　tablesort フィールド【id】…ＩＮＴ　・　AUTO_INCREMENT 【no】…varchar(11) 【name】…varchar(20) 【message】…TEXT 【file】…varchar(255) 【date】…datetime ------------------------------------- 　　　【表示しているコード】下記でＤＢの画像を呼び出して並べ替えれるようになりました。 echo '<form action ="tablesort.php" method="POST" ><ul class="sortable">';//<li class="ui-state-default">'; //-------------------------------------------------------- //　↑　ソートテーブルスタート //-------------------------------------------------------- $my_Row = mysql_query("SELECT * FROM tablesort",$my_Con); if (!$my_Row){ die(mysql_error()); } while($row = mysql_fetch_array($my_Row)){ $so_no = $row["no"]; $so_file = $row["file"]; $so_id = $row["id"]; echo <<<EOT <li class="stb" id="$so_no"> <img src="../img/$so_file" width="75px" height="100px" > </li> EOT; } //--------------------------------------------------- //　↓　ソートテーブルの終了 //--------------------------------------------------- echo <<< EOP </ul><input type="hidden" id="result" name="result" /><button id="submit">submit</button></form> EOP; ここからが不明点です。 submit を押された時にＤＢに保存するPHPが不明なのです。色んな事をしたので、どう書けばいいかご享受願いたいですm(_ _)m ↓↓↓ //-------------------------------------------------------- //並べ替えを保存 //-------------------------------------------------------- if (isset($_POST["submit"])){ $result = $_POST['result']; echo $result; $result_array = explode(',',$result); print_r($result_array); print_r(serialize($result_array)); mysql_query("UPDATE tablesort SET no=●●●● WHERE id=●●●●",$my_Con); header('Location: http://hp-sys.com/menu-5/tablesort.php'); } この●●●●の部分ってどうすれば良いのでしょうか？？それとも、もっと根本的な間違いでしょうか？？すみませんが宜しくお願いいたしますm(_ _)m
jQueryのclickについて

現在仕事でjQueryを使用して、要素の表示非表示を行うイベントを作成しているのですが、一つ難題がありまして・・・まず下記に簡単に文法を記述しましたのでご覧下さいませ・・・『html』 <ul> <li>ボタン1</li> <li>ボタン2</li> <li>ボタン3</li> </ul> <div class="area"></div> <div class="area"></div> <div class="area"></div> 『jQuery』 j$("li").click(function(){ var btnNum = j$("li").index(this); j$(".area").hide(""); j$(".area").eq(btnNum).show(""); }); 上記にしたときに例えば”ボタン1”を押した時に再度”ボタン1”をおすとここでいう一番目の”area”を消去したいのですが、 toggleを使用すると”ボタン1”を押した時に”ボタン2”を押すと再び”ボタン1”を押すと、消去してからの動作をするため二度クリックしないと”area”が表示されません… そこでtoggleの様な動作で、同じボタンを二度押すと対象の要素が消去されるようないい方法ありませんでしょうか？折角jQueryを使用しているのでスリムな記述がしたいんですよね・・・宜しくお願いします。
AIは使う人の年齢や市場にも影響する？人工知能の可能性

OKWAVE コラム
2種類のリスト項目をjQueryを使って揃えたい

スマートフォンサイト制作中です。やりたい事は横並びにしている2種類のリスト項目数を jQueryを使って、揃えたいって事です。以下のようなリストがあって、 2種類のulを横並びにしています。（2列のテーブルみたいな感じ） <ul class="column1"> <li>あいう</li> <li>かきく</li> <li>さしす</li> </ul> <ul class="column2"> <li>アイウ</li> <li>カキク</li> <li>サシス</li> <li>タチツ</li> </ul> 例として、上記の場合、class="column2"の方が<li>が一つ多いのでそれに合わせてclass="column１"に<li>を追加して(追加した要素の中身はブランクで)、横並びを揃えたいのです。 ※要素の中身が2行になったりしてズレることはないです。考え方として、おそらく class="column1"とclass="column2"のそれぞれのエレメント数を size()で取得してそのエレメント数を比較して、大きい個数に合わせて、足りない分を、足りない<ul>要素内にappend()を使って挿入でもするのかな？？ …って思っているのですがどのように書けばよいのか、やっぱり分からないのです。 ※ちなみにHTMLの、この<ul><li>リストは動的に生成しています。現行のPCサイトのHTMLをいじらずにスマホ対応しているので、このリストを使った横並びを変えることは出来ないのです。どなたか詳しい方、どうかご教授ください。どうぞ宜しくお願いいたします。
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カ所目とも同じように処理するにはどうしたら良いでしょうか？ご指導・ご鞭撻のほど、よろしくお願いします。
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を勉強したてで、恥ずかしいばかりですが、ご教授のほど宜しくお願いいたします。
jqueryのvalue習得によるhtml書き換え

jqueryにてvalueの値を取得し、同じ値を持つ要素を消去した後、別のものに書き換えたいと思います。目的：「value=4」を持つ要素をクリックしたらその要素だけではなく、属性「value=4」を持つ他の要素を入れ替えたい。 HTMLソース ------------------------------------------------ <ul> <li><a href="" class="counter" value=1>test</a></li> <li><a href="" class="counter" value=1>test</a></li> <li><a href="" class="counter" value=2>test</a></li> <li><a href="" class="counter" value=1>test</a></li> <li><a href="" class="counter" value=3>test</a></li> <li><a href="" class="counter" value=4>test</a></li> <li><a href="" class="counter" value=5>test</a></li> <li><a href="" class="counter" value=4>test</a></li> <li><a href="" class="counter" value=4>test</a></li> <li><a href="" class="counter" value=4>test</a></li> <li><a href="" class="counter" value=5>test</a></li> <li><a href="" class="counter" value=5>test</a></li> </ul> ------------------------------------------------ javascriptソース <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script> $(function(){ $(".counter").click(function () { siteID =$(this).attr("value"); $(".counter([value=siteID])").css("background-color","#000"); }); }); </script> 何とかvalueの値を取得することは出来たのですが、その後の動作がわかりません。上記の方法で解決するかと思えたのですが、ここから先が進みませんでした。試しに背景色のみを同じ値を持つ要素を書き換えようと思っております。どちらかご教授頂ければ幸いに御座います。
jQuery　1つの要素を複数箇所に表示したい

いつもこちらでお世話になっています。 jQuery初心者です。また、お知恵を拝借したく、お願いします。以下のようなHTMLがあります。やりたい事は <div class="info">の中の要素全て(ul以下)を <div class="hoge">の中にも表示したいのです。ですが、以下のスクリプトのように書くと、今度は、<div class="info">の中の要素が表示されなくなり、 <div class="hoge">の中に表示されました。 <div class="info">の中の要素は表示のままで、重複して<div class="hoge">の中に表示させる方法ってありますか？ ▼HTML ------------------- <div class="hoge"></div> ～別要素(省略)～ <div class="info"> 　<ul> 　　<li>項目1</li> 　　<li>項目2</li> 　</ul> </div> ▼Script ------------------- var contents = $("div.info ul"); $("div.hoge").html(contents); ------------------- 多分、基本的な事なのかもですが、 1つの要素を重複して表示できる方法がありましたら詳しい方、ご教授ください。どうぞ宜しくお願いいたします。
要素をソートしてその要素を三つずつ表示するには

お世話になっております。最近、jQueryを使い始めたjavascript初心者です。以下の動作を実装したいのですが、どうすればいいでしょうか？ 1.カテゴリーボタン（中華、和食、洋食）を押すとそのカテゴリー要素の上位三つのみが表示される。 2.もっと見るボタンを押す度に表示させているカテゴリー要素が三つずつ増えていく。各カテゴリー要素の上位三つを表示させるのは jQueryのltフィルターを使うことでできたのすが、もっと見るボタンで三つずつ表示要素を増やしていく動作がうまくいきません。 $(".chinese:lt(3)").show();のli()の数値部分を変数にし、もっと見るボタンを押すたびに変数Numに値を+3してltの数値を動的に変更することができればうまくいくと思ったのですが $(".chinese:lt(Num)").show(); これでは動作しません。以下ソースです。ご回答よろしくお願いいたします。 http://foofoo77.web.fc2.com/imagechange/sort.html <head> <script type="text/javascript" src="js/jquery-1.4.4.min.js"></script> <script type="text/javascript"> $(function(){ var Num = 3; $("#chinese-btn").click(function(){ $("li").hide(); $(".chinese:lt(Num)").show(); }); $("#japanese-btn").click(function(){ $("li").hide(); $(".japanese:lt(2)").show(); }); $("#european-btn").click(function(){ $("li").hide(); $(".european:lt(2)").show(); }); $("#add-seeing").click(function(){ Num +=2; alert(Num); }); }); </script> <style type="text/css"> li { display: none; } </style> </head> <h1>ソート</h1> <button id="chinese-btn">中華</button> <button id="japanese-btn">和食</button> <button id="european-btn">洋食</button> <ul> <li class="chinese">中華</li> <li class="japanese">和食</li> <li class="european">洋食</li> <li class="chinese">中華</li> <li class="japanese">和食</li> <li class="european">洋食</li> <li class="chinese">中華</li> <li class="japanese">和食</li> <li class="european">洋食</li> <li class="chinese">中華</li> <li class="japanese">和食</li> <li class="european">洋食</li> <li class="chinese">中華</li> <li class="japanese">和食</li> <li class="european">洋食</li> <li class="chinese">中華</li> <li class="japanese">和食</li> <li class="european">洋食</li> </ul> <button id="add-seeing">もっと見る</button>
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>
jQueryでホバーされていない要素を半透明にする

http://www.skuare.net/test/jopacity_show.html 下記のようにスクリプトがありますが、いまいちわかりません。画像の場合　<li><img src=hoge.gif title="menu 1"></li>でよろしいのでしょうか？ <ul id="menu"> <li>menu 1</li> <li>menu 2</li> <li>menu 3</li> <li>menu 4</li> </ul> 「menu 1」にマウスオーバーされた際に、ほかの2-4が半透明になるイメージです。まずはjQueryからjquery.jsをダウンロードします。その後、以下のようなscriptを記述します。 <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#menu').children().hover(function() { //#menuの子要素にマウスオーバーした時の処理 $(this).siblings() //その要素の兄弟要素をすべて取ってきて .stop().fadeTo(500,0.5); //500ミリ秒かけて、opacity0.5まで変化させます }, function() { //マウスアウトの処理 $(this).siblings() .stop().fadeTo(500,1); //戻します }); }); </script>
jQueryを使ってある画像を別の画像に置き換えたい。

jQueryを使ってある画像を別の画像に置き換えたい。 jQueryを使って、<body class="info">の時にだけ <ul id="global-nav">の中の画像「info.gif」を「info_on.gif」に置き換えるということをしたいです。 <body class="info"> <ul id="global-nav"> <li><img src="info.gif" /></li> <li><img src="about.gif" /></li> </ul> </body> ↓↓↓ <body class="info"> <ul id="global-nav"> <li><img src="info_on.gif" /></li> <li><img src="about.gif" /></li> </ul> </body> どのように記述をしてやるとうまくいきますでしょうか。色々試しているのですがうまくいきません。よろしくお願いします。
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"))") のように記述するとどうしてエラーになるのでしょうか？どうぞよろしくお願いいたします(>_<)
jQueryにて現在表示しているURLにあわせてCSSを追加する方法を

jQueryにて現在表示しているURLにあわせてCSSを追加する方法を教えてください。現在、HTMLを <ul id="#menu"> <li id="#menu_home"><a href="/index.html">HOME</a></li> <li id="#menu_1"><a href="menu_1/foo.html">MENU_1</a></li> <li id="#menu_2"><a href="menu_2/bar.html">MENU_2</a></li> <li id="#menu_3"><a href="menu_3/com.html">MENU_3</a></li> </ul> のように組んでいます。ローカルホスト上で開発テストしているので、URLは「http://localhost/～」となります。現在表示しているURLにあわせて、たとえば、HOMEを表示している際には、 <li id="#menu_home"><a href="/index.html" class="active">HOME</a></li> のようにCSSクラスをjQueryにて実現する方法を探しています。 JavaScriptで実現する方法はあるようなのですが、jQueryで実現できないかと試行錯誤しているものの、うまく行きません。できる限りシンプルにしたいためjQueryやAjaxのプラグインは避けたいです。どなたかお知恵を拝借できないでしょうか？何卒よろしくお願いします。
jqueryで特定の要素をdivで囲う

jqueryを使い、HTMLの特定の要素をdivで囲いたいと思っています。元のHTMLのソースは、 ========= <div class="tabWrap02 tabSwitcher materialityRefine"> <h2 class="headline06 jqa mb20" style="display: none;"></h2> <ul class="tabNav range9Col textSmall organizationRefine range17Col upper"> <li class="needTitle active" style="height: 50px;"></li> <li></li> <li></li> </ul> <ul class="spAcodNav"> <li class=""></li></ul><div id="tab02-1" class="tabDetail" style="display: none;"> <li></li> </ul> <div id="tab02-1" class="tabDetail" style="display: none;"> </div> <ul class="spAcodNav"> <li class=""></li></ul><div id="tab02-2" class="tabDetail" style="display: none;"> <li></li> </ul> <div id="tab02-2" class="tabDetail" style="display: none;"> </div> <h2 class="headline06 mb20">×××</h2> <ul class="tabNav range8Col textSmall mb50 range17Col upper"> <li class="active" style="height: 65px;"></li> <li></li> <li></li> </ul> <h2 class="headline06 jqa mb20" style="display: none;"></h2> <ul class="tabNav range9Col textSmall organizationRefine range17Col upper"> <li class="needTitle active" style="height: 50px;"></li> <li></li> <li></li> </ul> <ul class="spAcodNav"> <li class=""></li></ul><div id="tab02-3" class="tabDetail" style="display: none;"> <li></li> </ul> <div id="tab02-3" class="tabDetail" style="display: none;"> </div> <ul class="spAcodNav"> <li class=""></li></ul><div id="tab02-4" class="tabDetail" style="display: none;"> <li></li> </ul> <div id="tab02-4" class="tabDetail" style="display: none;"> </div> </div> ========= このようになっております。上記のソースを、以下のように２か所<div class="wrap">で<ul class="spAcodNav">を囲いたいと思っています。 ========= <div class="tabWrap02 tabSwitcher materialityRefine"> <h2 class="headline06 mb20">●●●</h2> <ul class="tabNav range8Col textSmall mb50 range17Col upper"> <li class="active" style="height: 65px;"></li> <li></li> <li></li> </ul> <h2 class="headline06 jqa mb20" style="display: none;"></h2> <ul class="tabNav range9Col textSmall organizationRefine range17Col upper"> <li class="needTitle active" style="height: 50px;"></li> <li></li> <li></li> </ul> <div class="wrap"> <ul class="spAcodNav"> <li class=""></li></ul><div id="tab02-1" class="tabDetail" style="display: none;"> <li></li> </ul> <div id="tab02-1" class="tabDetail" style="display: none;"> </div> <ul class="spAcodNav"> <li class=""></li></ul><div id="tab02-2" class="tabDetail" style="display: none;"> <li></li> </ul> <div id="tab02-2" class="tabDetail" style="display: none;"> </div> </div> <h2 class="headline06 mb20">×××</h2> <ul class="tabNav range8Col textSmall mb50 range17Col upper"> <li class="active" style="height: 65px;"></li> <li></li> <li></li> </ul> <h2 class="headline06 jqa mb20" style="display: none;"></h2> <ul class="tabNav range9Col textSmall organizationRefine range17Col upper"> <li class="needTitle active" style="height: 50px;"></li> <li></li> <li></li> </ul> <div class="wrap"> <ul class="spAcodNav"> <li class=""></li></ul><div id="tab02-3" class="tabDetail" style="display: none;"> <li></li> </ul> <div id="tab02-3" class="tabDetail" style="display: none;"> </div> <ul class="spAcodNav"> <li class=""></li></ul><div id="tab02-4" class="tabDetail" style="display: none;"> <li></li> </ul> <div id="tab02-4" class="tabDetail" style="display: none;"> </div> </div> </div> ========= jqueryでwrapAllなどを使って試しているのですが、うまいいかず、お分かりいただける方いらっしゃいましたらご教授いただけますと幸いです。よろしくお願い致します。
jqueryのsortableで行き来自由に

お世話になります jqueryのsortableでconnectWithを使うことで別のエリアにソートが可能になりますがすべての要素を別の要素に移動した場合もとの場所に戻すことが不可能になってしまいますこれを可能にするにはどうしたらいいのでしょうか例として以下のソース AエリアからBエリアに「a」「b」を移動させた後に BエリアからAエリアに戻そうとしても、移動できなくなってしまいます <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>connectWith</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#sortable table tbody").sortable({ connectWith:'#sortable table tbody' }).disableSelection(); }); </script> </head> <body> <div id="sortable">  <table width="100%" border="1" cellspacing="10" cellpadding="10"> <thead> <tr> <th>タイトル　エリアA（ここは動かしたくない）</th> </tr> </thead> <tbody> <tr> <td>a</td> </tr> <tr> <td>b</td> </tr> </tbody> </table>   <table width="100%" border="1" cellspacing="10" cellpadding="10"> <thead> <tr> <th>タイトル　エリアB（ここは動かしたくない）</th> </tr> </thead> <tbody> <tr> <td>c</td> </tr> <tr> <td>d</td> </tr> </tbody> </table>  </div> </body> </html> 対策方法御存知の方お助け下さいませ！
sortableを使用したデータのUPDATE

お世話になります。 jQueryの「 sortable 」というプラグインを使用して、データベースから「id」、「name」、「price」、「no」というデータをselectして、ブラウザで並び順を変更後に updateするという流れですが、最終的にシリアライズした配列をDBへupdateできません。「id」は連番にしてユニークな値が入っていて、「no」には並び順の値が半角数字で入れてあります。シリアライズした配列のデータは、ブラウザで確認すると問題ありません。恐らくupdateの際のforeachの処理が上手く行ってないように感じますが、正常に「id」と「no」の整合性を取ってDBに投げるには、どの様に組み立てたら良いのでしょうか？以下が主要箇所のソースです。 ------------------------------------------------------- <script src="js/jquery-1.9.1.js"></script> <script src="js/jquery-ui-1.10.3.custom.js"></script> <script> $(function() { $(".sortable").sortable(); $(".sortable").disableSelection(); $("#submit").click(function() { var result = $(".sortable").sortable("toArray"); $("#result").val(result); $("form").submit(); }); }); </script> <form action="index.php" method="post"> <ul class="sortable"> <?php // DB接続 include "db_pdo_conn.php"; $sql1 = "SELECT id, name, price, no FROM sortable ORDER BY no"; $stmt = $conn->prepare($sql1); $stmt->execute(); foreach ($stmt as $row) { $id = $row["id"]; $name = $row["name"]; $price = $row["price"]; $no = $row["no"]; echo <<<li <li class="ns" id="$id">{$name} {$price} {$no}</li> li; } $result = $_POST['result']; $result_array = explode(',', $result); //シリアライズした$result_arrayを表示 print_r(serialize($result_array)); //データが送信されたときに変更する if (count($_POST)) { //nomを「 1 」から振り替える $nom = 1; foreach ($result_array as $id){ $nom++; $sql2 = "UPDATE sortable SET no='$nom' WHERE id='$id'"; $stmt = $conn->prepare($sql2); $stmt->execute(array($no_comp, $id_comp)); } } ?> </ul> <input type="hidden" id="result" name="result" /> <button id="submit">submit</button> </form> ------------------------------------------------------- ３日程試行錯誤しておりますが、解決できる糸口が見つからないのでご存知の方がいらっしゃいましたら、ご教示の程どうぞよろしくお願い申し上げます。 ---------------- ▼スペック PHP 5.3.3 MySQL 5.0.95 ----------------
【JQuery】アコーディオンの入れ子について

アコーディオンの入れ子（多階層）について、お教えください。 JQueryで入れ子のアコーディオンメニューを作成したいと思っています。入れ子の数は計3つを予定してます。（第3階層まで） 1～3つ目それぞれのメニューは増減する可能性がある為、出来るだけ数字で割り振ったIDなどは使用せずに表現したいと思っています。（メニューを増やす度にIDが増えるのを止めたい） ■HTMLソース例 <ul class="navi"> <li>第1階層 <ul class="navi-sub"> <li>第2階層 <ul class="navi-sub2"> <li><a href="#">第3階層</a></li> <li><a href="#">第3階層</a></li> <li><a href="#">第3階層</a></li> </ul> </li> <li>第2階層 <ul class="navi-sub2"> <li><a href="#">第3階層</a></li> <li><a href="#">第3階層</a></li> <li><a href="#">第3階層</a></li> </ul> </li> </ul> </li> </ul> 上記のようなHTMLソースで入れ子のアコーディオンを作成することは可能でしょうか？（ID、CLASSのセレクタの振り方は上記以外でもかまいません）また、最初からアコーディオンメニューの1部分だけ展開した状態にする事は可能なのでしょうか？（上の質問にも言える事ですが、JavaScriptにこだわっている訳ではないので、CSSでも表現が可能であればCSSでも構いません） JavaScriptがよく分からない為、お教え頂けると大変助かります。何卒宜しくお願い致します。
jQuery アコーディオンメニューについて

jQuery アコーディオンメニューについていくつか質問させていただきます。当方、はじめてjQueryを使っています。以下のページを参考にアコーディオンメニューを作成しています。 http://triplexxx.jp/archives/150 <ul class="acc"> <li><a href="1" class="open">category1</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> <ul class="fxmn"> 　　　　 <li><a href="#>menu1-3-1</a></li> <li><a href="#">menu1-3-2</a></li> <li><a href="#">menu1-3-3</a></li> </ul> </li> 　</ul> </li> <li><a href="2" class="open">category2</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="3" class="open">category3</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> <li><a href="#">menu 3-4</a></li> </ul> </li> </ul> var $j = jQuery; $j(function(){ $j(".acc").each(function(){ $j("a.open", this).each(function(index){ var $this = $j(this); if(index !=n) $this.next().hide(); $this.click(function(){ var params = {height:"toggle",opacity:"toggle"}; $j(this).next().animate(params).parent().siblings() .children("ul:visible").animate(params); return false; }); }); }); }); (1)：具体的にあげますと、上記のmenu1-3をクリックしてmenu1-3-1、1-3-2、1-3-3のアコーディオン　　を開き、　　1-3-1をクリックしてリンク先に飛んだ際に、直前に開いていたアコーディオンをそのままの状態　　　にしておきたいというものです。（↓こんな感じです） category1 ・　menu 1-1 ・　menu 1-2 ・　menu 1-3 ・・　menu1-3-1 ・・　menu1-3-2 ・・　menu1-3-3 category2 category3 教えて！gooの過去の質問を参考させていただきながら、 if(index !=n) $this.next().hide();　　で、　n　を指定することで、それぞれのサブメニューを開いた状態にすることには成功したのですが、その下の階層のメニューをどのように指定すればよいかがわかりません。 (2)：また、リンク先のページに飛んだ時に、アコーディオン部分は動かないのが望ましいのですが、　　可能でしょうか？　　（タブのようにページが切り替わる感じが理想的ですが、ページ数が大変多いため難しいとおもっ　　ています） (3)：(1)、(2)はページごとにscriptを書き換えるのではなく、htmlをいじることで（li タグにclass指定をす　　　るなど）変更するのは可能でしょうか？　　外部scriptが使えればと思っています。複数の質問になりましたが、どうぞよろしくお願いいたします。
アコーディオン（jquery）クリック後他閉じたい

プログラム初心者のものです。 jQueryを利用したアコーディオンメニューを作成したのですが、現在、クリック後開き、他をクリック後もクリック済みの箇所が開いた状態になっています。＜改善＞クリックしたメニューのみ表示させたいのですがお手数おかけいたします、ご教示いただけますでしょうか。下記にソースを掲載してみます。【javascript】 $(function () { // 親メニュー処理 $('span').click(function() { // メニュー表示/非表示 $(this).next('ul').slideToggle('fast'); }); // 子メニュー処理 $('li').click(function(e) { // メニュー表示/非表示 $(this).children('ul').slideToggle('fast'); e.stopPropagation(); }); }); 【HTML】 <div id="nav"> <span class="btn1"><a href="#">A</a></span> <ul> <li class="t1"><a href="#">A-1</a> <ul> <li class="sub_t1">○○○○</li> <li class="sub_text"><a href="#">あいうえお</a></li> <li class="sub_text"><a href="#">かきくけこ</a></li> <li class="sub_t1">○○○○</li> <li class="sub_text"><a href="#">あいうえお</a></li> <li class="sub_text"><a href="#">かきくけこ</a></li> </ul> </li> <li class="t1"><a href="#">A-2</a> <ul> <li class="sub_t1">○○○○</li> <li class="sub_text"><a href="#">あいうえお</a></li> <li class="sub_text"><a href="#">かきくけこ</a></li> <li class="sub_t1">○○○○</li> <li class="sub_text"><a href="#">あいうえお</a></li> <li class="sub_text"><a href="#">かきくけこ</a></li> </ul> </li> <li class="t1"><a href="#">A-3</a> <ul> <li class="sub_t1">○○○○</li> <li class="sub_text"><a href="#">あいうえお</a></li> <li class="sub_text"><a href="#">かきくけこ</a></li> <li class="sub_t1">○○○○</li> <li class="sub_text"><a href="#">あいうえお</a></li> <li class="sub_text"><a href="#">かきくけこ</a></li> </ul> </li> </ul> </div> ご教授の程よろしくお願い致します。

jqueryのsortableで一部ソート禁止にする方法

jqueryのsortableで一部ソート禁止に

質問者が選んだベストアンサー

お礼 2013/02/26 22:18

関連するQ&A

jquery sortableについて

sortable ギブアップです…助けてください！

jQueryのclickについて

AIは使う人の年齢や市場にも影響する？人工知能の可能性

2種類のリスト項目をjQueryを使って揃えたい

jQueryで複数あるUL要素の最後のLI要素以外を処理したい

jQueryでリスト項目の表示・非表示を切りかえる

jqueryのvalue習得によるhtml書き換え

jQuery　1つの要素を複数箇所に表示したい

要素をソートしてその要素を三つずつ表示するには

jQueryで記事を６列表示にしたいのです。

jQueryでホバーされていない要素を半透明にする

jQueryを使ってある画像を別の画像に置き換えたい。

jQueryのコードで分からない箇所があります

jQueryにて現在表示しているURLにあわせてCSSを追加する方法を

jqueryで特定の要素をdivで囲う

jqueryのsortableで行き来自由に

sortableを使用したデータのUPDATE

【JQuery】アコーディオンの入れ子について

jQuery アコーディオンメニューについて

アコーディオン（jquery）クリック後他閉じたい

注目のQ&A

カテゴリ
一覧

専門家に質問してみよう
専門家登録

あなたにピッタリな商品が見つかる！ OKWAVE セレクト

jqueryのsortableで一部ソート禁止にする方法

jqueryのsortableで一部ソート禁止に

質問者が選んだベストアンサー

お礼 2013/02/26 22:18

関連するQ&A

jquery sortableについて

sortable ギブアップです…助けてください！

jQueryのclickについて

AIは使う人の年齢や市場にも影響する？人工知能の可能性

2種類のリスト項目をjQueryを使って揃えたい

jQueryで複数あるUL要素の最後のLI要素以外を処理したい

jQueryでリスト項目の表示・非表示を切りかえる

jqueryのvalue習得によるhtml書き換え

jQuery 1つの要素を複数箇所に表示したい

要素をソートしてその要素を三つずつ表示するには

jQueryで記事を６列表示にしたいのです。

jQueryでホバーされていない要素を半透明にする

jQueryを使ってある画像を別の画像に置き換えたい。

jQueryのコードで分からない箇所があります

jQueryにて現在表示しているURLにあわせてCSSを追加する方法を

jqueryで特定の要素をdivで囲う

jqueryのsortableで行き来自由に

sortableを使用したデータのUPDATE

【JQuery】アコーディオンの入れ子について

jQuery アコーディオンメニューについて

アコーディオン（jquery）クリック後他閉じたい

注目のQ&A

カテゴリ 一覧

専門家に質問してみよう 専門家登録

あなたにピッタリな商品が見つかる！ OKWAVE セレクト

jQuery　1つの要素を複数箇所に表示したい

カテゴリ
一覧

専門家に質問してみよう
専門家登録