web-dev-qa-db-ja.com

jqueryセレクター内の変数の使用

私は次のコードで動的jqueryセレクターを構築しようとしています：

var section_id = "{segment_3}";
var num_children = $('#'+ section_id + ' ul').children().size();

ここで、segment_3は、UR​​L文字列から正常に取得した値です。たとえば、「section_one」の値を返す場合があります。

しかし、変数num_childrenを作成しようとすると、この参照は機能しません。動的参照を構築するためのコードを構築するにはどうすればよいですか？助けてくれてありがとう。

javascriptjqueryvariablesdynamicselector
18
mheavers

Var section_id = 'section_1'とすると、次のようになります。

$('#'+ section_id + ' ul').children().size();

あなたにあげます

$('#section_1 ul').children().size();

はい、これは有効です。 ＃section_1要素内のすべてのul要素を提供します（それらがどの程度深くても）。おそらく、要素の配列を取得し、その上で.children（）を呼び出すこともできます。すべてうまくいくはずです。

36
Kamil Sarna

HTML 4.01までは、許可されている値の文字（命名規則）に関してid属性が非常に制限されていました。

id属性は、AZまたはazの文字で始まり、その後に次の文字が続く必要があります：文字（A-Za-z）、数字（0-9）、ハイフン（ "-"）、アンダースコア（ "_"）、コロン（ "："） 、ピリオド（ "。"）とすべての値は大文字と小文字が区別されます。

*注：私の経験では、小文字にidと_のみを使用していることがわかり、CSSセレクター（.something：pseudo-class）から際立っています。*

一方、HTML5では、idの値としてほとんど何でも持つことができます。

参照： http://www.w3.org/TR/html5/elements.html#the-id-attribute

したがって、セレクターはHTML5仕様で完全に有効（有効）ですが、jQueryで機能させるには、セレクターパーサーが特別な意味で使用するすべての文字をエスケープする必要があります。また、JavaScriptコードのため、2つの\\を使用する必要があります（最初のコードは2番目のコードをエスケープします）。 jQueryはこれを行う方法を提供していないため、以下は私が使用しているコードです。

例：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>jQuery HTML5 Selector Escaping</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript">

    // Ths is the list of special characters used by jquery selector parser
    // !"#$%&'()*+,./:;?@[\]^`{|}~
    $(document).ready(function() {
        var selector = '{my_%real{ly:s#tra`n[ge_i]d_n^@a|me>}';
        selector = selector.replace(/([ {}\|`\^@\?%#;&,.+*~\':"!^$[\]()=>|\/])/g,'\\$1');
        var object = $('#'+selector+' ul').children().size();
        alert('UL has '+ object +' LIs');
    });

    </script>
</head>
<body>
    <div id="{my_%real{ly:s#tra`n[ge_i]d_n^@a|me>}">
        <ul>
            <li>Sehr</li>
            <li>Gut</li>
            <li>Doh</li>
        </ul>
    </div>
</body>
</html>

私はコードを編集しましたが、修正された箇所でいくつかの間違いがありました。 :)

1
ludesign

試す

var num_children = $('#'+ section_id.substring(1, section_id.length-2) + ' ul').children().size();
0
Aliostad

上記のコメントは正しいです... idセレクターの基本的な構文は$（＃itemID）...です。

var myValue = $（ "＃new_grouping _" + i）.val（）; //これは機能します

0
John K.