jQueryのセレクタで、"btn01 bi"という要素内のspanを
指定したいと思っています。
しかし、以下の書き方ではダメなようです。

$('.btn01 bi span').click(function(){ …

スペースが含まれるからなのはわかりますが、この場合はどう書けば
良いのでしょうか?
ご教授ください。

このQ&Aに関連する最新のQ&A

A 回答 (2件)

classは、


【引用】____________ここから
class = cdata-list [CS]
 この属性は、ある要素に1つのクラス名を割り当てるか、または複数のクラス名を設定する。 幾つの要素に対してでも、同じクラス名あるいはクラス名群が割り当てできる。複数のクラス名については、空白文字によって区切らねばならない。
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[The global structure of an HTML document (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )]より
半角スペースで区切られた値のリストとして機能します。
 よって
<span class="btn01 bi"></span>
>"btn01 bi"という要素内のspanを
ではなくて
「class属性の値リストに(btn01,bi)をもつspan要素を指定する」
には、
$('span.btn01.bi').click(function(){
です。

「class属性の値リストに(btn01,bi)をもつ要素内のspan」
  (例)<p class="btn01 bi"><span>・・・
の場合は、
$('p.span.btn01 span').click(function(){
または
$('*.span.btn01 span').click(function(){ p要素に限定しない
$('.span.btn01 span').click(function(){ p要素に限定しない
あるいは、

 「class属性の値リストに(btn01,bi)をもつ要素の直接の子どもであるspan」
の場合は
$('p.span.btn01>span').click(function(){
または
$('*.span.btn01>span').click(function(){ p要素に限定しない
$('.span.btn01>span').click(function(){ p要素に限定しない

 基本的には、
セレクタ( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )と同じです。
    • good
    • 0

"btn01 bi"は要素ではなくclassですよね?



".btn01.bi span"のようにクラスを連続させて指定してみてください。

対象を直下のspanに限定するときは スペースを>にしてください。
    • good
    • 0

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Qjavascript:名('.$data.')で複数のデータを送る方法,(jqueryのload利用)

初めまして、jqueryを勉強し始めている初心者です。
jqueryのloadを利用して、PHPでページ分割作成してますが、
javascript:名('.$data.')で複数のデータを送る方法ご存知の方いましたら、教えていただけないでしょうか。。
何ぶん、勉強初めて、1ヶ月弱のため、不備等がれば、すみません。
hidden等でまとめてid作成すると、うまくページ分割ができませんでしたので
javascript:名('.$data.')で複数のデータを送る方法を検討しています。。
環境、jquery1.4, PHP5.0, eclipse3.5, mysql5.0
(sql等は問題なく動作してます)
//<php側抜粋--testo.php>
<html>
<head>
<script type="text/javascript" src="jquery1.4.js"></script>
<script type="text/javascript" src="testo.js"></script>
<title></title>
</head>
<body>
<div id="box"></div>
<?php
$nm=$_POST['nm'];
$page_num=$_POST['page_num'];

//echo'<a href="javascript:next('.$page.')">次のページへ>></a>';
//↑と1つの値であれば問題なく値をtesto.jsに渡しphploadできます。。

//↓のjavascript:名前('.データ値.')で、2つの値を
//testo.jsでphpに渡しloadしたい。
//↓の解決策すみませんがご存知でしたら、教えてください。
//------ここ質問(1)------
echo'<a href="javascript:next('.$page.','.$nm.')">次のページへ>></a>';
?></body></html>

//testo.js-----
/*function next(page)
{$("#box").load("testo.php",{page_num:page});}
 と1つの値であれば、POSTで正常にtesto.phpに渡せますが
 2つ値を渡したいので、
おそらく、全然ちがったり、間違えていると思います。。
調べてみましたが、分かりませんでした。。
*/
//--質問(2)↓--
function next(page,nm)
{$("#box").load("testo.php",{page_num:page,nm:nm});}

質問は上記(1)(2)です。全ソース記載したいのですが、
文字数オーバーのため、記載できませんでした。。
すみません
おそらく、不備や、勉強の不足さも感じるとは思いますが、
分かりやすく、ソース等で教えていただければ、幸いです。
すみません。。よろしくお願いいたします。

初めまして、jqueryを勉強し始めている初心者です。
jqueryのloadを利用して、PHPでページ分割作成してますが、
javascript:名('.$data.')で複数のデータを送る方法ご存知の方いましたら、教えていただけないでしょうか。。
何ぶん、勉強初めて、1ヶ月弱のため、不備等がれば、すみません。
hidden等でまとめてid作成すると、うまくページ分割ができませんでしたので
javascript:名('.$data.')で複数のデータを送る方法を検討しています。。
環境、jquery1.4, PHP5.0, eclipse3.5, mysql5.0
(sql等は問題な...続きを読む

Aベストアンサー

質問2の方で、2つ渡しているように見えるけど?

複数送る、は、きちんとできているのではなくて

QJquery a href="javascript:名前('.$データ.')">の方法でString(文字)を渡す方法

一部不備ありましたので、再度質問です。。
すみません
初めまして、jqueryを勉強し始めている初心者です。。
a href="javascript:名前('.$データ.')">の方法で
データにString(文字)を持たせ、JQUERYを利用して、別のphpファイル(testo2.php)に値を渡し、
そのphpファイル(testo2.php)そのloadで読みたいのですが、うまくいきません
この方法ではできないのでしょうか?
このa href="javascript:名前('.$String型.')の方法を何とか
利用したいと思ってますので、ご存知の方いましたら、
教えていただけないでしょうか。。。?
また別方法があれが教えていただけないでしょうか?
(input hidden 等以外のa href="javascript:名前('.$String型.')的な方法)
何度もすみません。。。
何ぶん、勉強初めて、1ヶ月弱のため、不備等がれば、すみません。
環境、jquery1.4, PHP5.0, eclipse3.5


//-----testo1.php
<html>
<head>
<script type="text/javascript" src="jquery1.4.js"></script>
<script type="text/javascript" src="tes.js"></script>
<title></title>
</head>
<body>
<?php
//$id=1;(数字)の場合は値はわたせる、String 型の値の渡し方
//<a href="javascript:名前('.$文字列(String型).')">前のページ</a>
//でJQUERYを利用して、別のphpファイル(testo2.php)にを渡し
//loadで読みたい。
$id='文字列aaa';
<a href="javascript:value('.$id.')">前のページ</a>
?>
<div id="box">ここに値を表示したい</div>
</body></html>

//----tes.js
function value(id)
{$("#box").load("php/tt.php",{id:id});}

//------testo2.php
<html>
<head>
<script type="text/javascript" src="jquery1.4.js"></script>
<script type="text/javascript" src="tes.js"></script>
<title></title>
</head>
<body>
<?php
echo $_POST['id'];//文字列String型を受けたい。
?>
</body></html>

一部不備ありましたので、再度質問です。。
すみません
初めまして、jqueryを勉強し始めている初心者です。。
a href="javascript:名前('.$データ.')">の方法で
データにString(文字)を持たせ、JQUERYを利用して、別のphpファイル(testo2.php)に値を渡し、
そのphpファイル(testo2.php)そのloadで読みたいのですが、うまくいきません
この方法ではできないのでしょうか?
このa href="javascript:名前('.$String型.')の方法を何とか
利用したいと思ってますので、ご存知の方いましたら、
教えていた...続きを読む

Aベストアンサー

よく見ると、tes.jsのjavascriptも間違ってます。
function value(id)
{$("#box").load("php/testo2.php",{id:id});}
でしょう。

何か、意図してることが、さっぱりわかりません。

QjQueryのclick(function()が動かない・・・?

お世話になります。
JS初心者ですが、jQueryに手を出し勉強しているものです。

勉強の過程で登録フォームを作成しているのですが、

1. 登録フォーム1
2. 登録フォーム2
3. 確認画面
4. 完了画面

という流れになるようにPHP+jQueryでフォームを作成しています。
1と2の間で入力エラーがあった場合には、1のフォーム上に赤文字でエラー内容が表示。
2と3の間で入力エラーがあった場合には2のフォーム上でエラー表示。
としています。
更に1のフォーム上では、jQueryを使いフォームの一部をラジオボックスと
連動し表示・非表示が出来るようにしています。

そこで質問の内容なのですが、以下のコードで書くと、
1と2の間でエラーがあり、1のフォームに戻ってきた際に
ラジオボックスで「表示する」を選択していて、
値もちゃんと「表示する」となっているのに、表示したい部分が
非表示になってしまいます。
PHPでのエラー処理で値はちゃんと持ってきていることは確認しましたが、、、

宜しくお願いします。


---- ↓jQuery部分ソース ---------------------------------------------

<script type="text/javascript">
 $(function(){
$("#haiso").hide();

$("#show").click(function(){
$("#haiso").show(500);
});
$("#hide").click(function(){
$("#haiso").hide(500);
});
$("#haiso").hide(500);
});
</script>

---------------------------------------------------------------------
---- ↓HTML部分ソース -----------------------------------------------
  <table>
   <tr>
    <td>表示選択</td>
    <td>
   
    <!-- 表示選択エラー処理 -->
    <?
if ($_POST['samecheck'] == 1){
 echo '<label for="hide">非表示</label>
    <input type="radio" name="samecheck" value="1" checked="checked" id="hide">
    <label for="show">非表示</label>
    <input type="radio" name="samecheck" value="2" id="show"></td></tr>';

} elseif ($_POST['samecheck'] == 2) {
 echo '<label for="hide">非表示</label>
    <input type="radio" name="samecheck" value="1" id="hide">
    <label for="show">非表示</label>
    <input type="radio" name="samecheck" value="2" checked="checked" id="show"></td></tr>';

} else {
    echo '<label for="hide">非表示</label>
    <input type="radio" name="samecheck" value="1" checked="checked" id="hide">
    <label for="show">非表示</label>
    <input type="radio" name="samecheck" value="2" id="show"></td></tr>';
}
    ?>
  
    </td>
   </tr>
  </table>
   
  <div id="haiso">
   <table>
   </table>
  </div>
---------------------------------------------------------------------

お世話になります。
JS初心者ですが、jQueryに手を出し勉強しているものです。

勉強の過程で登録フォームを作成しているのですが、

1. 登録フォーム1
2. 登録フォーム2
3. 確認画面
4. 完了画面

という流れになるようにPHP+jQueryでフォームを作成しています。
1と2の間で入力エラーがあった場合には、1のフォーム上に赤文字でエラー内容が表示。
2と3の間で入力エラーがあった場合には2のフォーム上でエラー表示。
としています。
更に1のフォーム上では、jQueryを使いフォームの一部をラジオボ...続きを読む

Aベストアンサー

#1です。

>はじめの、
>> $("#haiso").hide();
>を書いておかないと、一度表示された状態から閉じるような
>ページアクションが起こってしまい不恰好だったので、
>こういう記述をしました。
2番目の意味が不明です。(あっても、今のところ悪さはしてないけど…)

>前述のように初回表示時は表示されなくて良いのですが、
>(samecheckが1になるようにCheckedタグを入れているため)
>エラーで返ってきた際に、samecheckが2を選択していても、
>ページロード時に表示されず困っているのです。。
2回目もphpから送り直しているのでしょうから、#1にも書きましたように『ページロード時』に実行されているのは、samecheckに関係なく、常に
非表示の処理です。
それなので、非表示になるのはまったく不自然ではありません。

スクリプトでその処理をしたいのなら、初回でも2回目でも(あるいは3回目でも)、ロード時に状態を判断して、表示/非表示を操作するようにしなければだめなはずでは?(現状は、常に非表示にしている)

あるいは、別の発想としてphp側で対象divの表示状態を制御してあげれば、スクリプト側はイベント処理のみでもよくなりますよね?
(jqueryのshow()、hide()はdisplay属性の設定を行っていたと思いますので、php側で属性をセットしてあげれば、スクリプトでは何もしなくても良くなります。)
 ↑jqueryの内容を確認していないので、ちょっと曖昧

#1です。

>はじめの、
>> $("#haiso").hide();
>を書いておかないと、一度表示された状態から閉じるような
>ページアクションが起こってしまい不恰好だったので、
>こういう記述をしました。
2番目の意味が不明です。(あっても、今のところ悪さはしてないけど…)

>前述のように初回表示時は表示されなくて良いのですが、
>(samecheckが1になるようにCheckedタグを入れているため)
>エラーで返ってきた際に、samecheckが2を選択していても、
>ページロード時に表示されず困っているので...続きを読む

Q(function(){})()の意味

(function(){})() の意味がよくわからずに困っています。

下記の2タイプではどう意味が変わってくるのでしょうか?
(1)var fuga = function(){};
(2)var fuga = (function(){})();

下記のコードで実験してみたところ、
---------------------
var fuga = function(){
this.obj = 'value';
};

var fuga = (function(){
return {
obj = 'value';
};
})();
---------------------
(1)の場合は、newしないとfugaオブジェクトのメンバを使用できない、
(2)の場合は、newしなくてもfugaオブジェクトのメンバを使用できるようなのですが、
(2)で(function(){})を取り除いて出てくる()はnewのエイリアスだったりするのでしょうか?

Aベストアンサー

var fuga = (function(){})();

var fuga = function(){}();
と同じです
つまり関数を定義してすぐ呼んでいるだけです

Qjqueryを使って無駄なspanタグを削除したい

お世話になります。

jqueryを使って無駄なspanタグを削除したいのですが、可能でしょうか?

例えば以下のhtmlがあった場合、
------------------------------------------
<span class="a">あいうえお</span>
<span>かきくけこ</span>
<span class="b">さしすせそ</span>
<span>たちつてと</span>
------------------------------------------

jqueryを使うことで、
------------------------------------------
<span class="a">あいうえお</span>
かきくけこ
<span class="b">さしすせそ</span>
たちつてと
------------------------------------------

このように無駄なspanタグを削除したいのですが、可能でしょうか?
ご存知の方、ご回答いただければ幸いです。
よろしくお願い致します。

お世話になります。

jqueryを使って無駄なspanタグを削除したいのですが、可能でしょうか?

例えば以下のhtmlがあった場合、
------------------------------------------
<span class="a">あいうえお</span>
<span>かきくけこ</span>
<span class="b">さしすせそ</span>
<span>たちつてと</span>
------------------------------------------

jqueryを使うことで、
------------------------------------------
<span class="a">あいうえお</span>
かきくけこ
<span class="b">さしすせそ</span>
たちつてと
-...続きを読む

Aベストアンサー

質問文を素直に実行するのなら。


$("span:not([class])").each( function(i){
var childNodes = this.childNodes;
$(this).replaceWith(childNodes);
});


検証データ

動作前
<div>
<p>
<span class="a">あいうえお</span>
<span>かきくけこ</span>
<span class="b">さし<span>す</span>せそ</span>
<span>たち<span>つ</span>てと</span>
なに<span>ぬ</span>ねの
</p>
</div>


動作後
<div>
<p>
<span class="a">あいうえお</span>
かきくけこ
<span class="b">さしすせそ</span>
たちつてと
なにぬねの
</p>
</div>


改行コードは半角スペースとして表示されます。(HTMLの文法に準拠。)
.children()にtextNodeが入っておらず、意外と苦労しました。

質問文を素直に実行するのなら。


$("span:not([class])").each( function(i){
var childNodes = this.childNodes;
$(this).replaceWith(childNodes);
});


検証データ

動作前
<div>
<p>
<span class="a">あいうえお</span>
<span>かきくけこ</span>
<span class="b">さし<span>す</span>せそ</span>
<span>たち<span>つ</span>てと</span>
なに<span>ぬ</span>ねの
</p>
</div>


動作後
<div>
<p>
<span class="a">あいうえお</span>
かきくけこ
<span class="b">さしすせそ</span>
たちつてと
なにぬねの
...続きを読む


このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング

おすすめ情報