Question

Given the following code, I would expect an alert of “searchRes1” which is a direct match of the id, and for the second block, i would expect it to alert the other two div’s as well since id contains “search”. What am i missing?

            <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

In CSS selectors, contains (~=) means contains the full word. This can be useful for things like rel="foo bar" which would be matched by rel~='foo', rel~='bar' but not rel~='fo'.

Try with startsWith (^=):

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

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