Question

鉴于以下代码，我希望得到“searchRes1”的警报，这是id的直接匹配，对于第二个块，我希望它能提醒另外两个div，因为id包含“search” 。我错过了什么？

            <div id="sRes">
               <h4>Search for things</h4> 
                <div id="searchRes1">123</div>
                <div id="searchRes2">456</div>
                <div id="searchRes3">789</div>
            </div>
            <script>
                $("#sRes div[id='searchRes1']").each(function () {
                    alert($(this).attr("id"));
                });

                $("#sRes div[id~='search']").each(function() {
                    alert($(this).attr("id"));
                });
            </script>

Answer 1

在CSS选择器中，包含（~=）表示包含完整的单词。这对于rel="foo bar"，rel~='foo'，rel~='bar'但不是rel~='fo'匹配的内容非常有用。

尝试 startsWith （^=）：

$("#sRes div[id^='search']")

http://www.w3.org/TR/css3-selectors/#attribute-selectors

Answer 2

第一个对我来说工作正常http://jsfiddle.net/raW26/

对于second工作，我认为您选择的属性必须用空格分隔

您必须使用*=或^=才能使用

P.S。您不需要$(this).attr("id")使用this.id就足够了

$("#sRes div[id='searchRes1']").each(function () {
            alert($(this).attr("id"));
        });

        $("#sRes div[id*='search']").each(function() {
            alert($(this).attr("id"));
        });

Answer 3

您错过了该名称，并使用!而不是~

$("#sRes div[id!='searchRes1']").each(function() {
                    alert($(this).attr("id"));
                });

JQuery：属性选择器无法按预期工作

3 个答案:

DEMO

Reference