mirror of
https://github.com/Hopiu/jquery-mobile.git
synced 2026-03-18 15:00:23 +00:00
122 lines
No EOL
5.3 KiB
HTML
122 lines
No EOL
5.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang='en'><head><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>
|
|
<div class="ui-page">
|
|
<div class="ui-header">
|
|
<h1>.not()</h1>
|
|
|
|
</div>
|
|
<div class="ui-content ui-body ui-body-c" id="not1">
|
|
<h2 class="jq-clearfix roundTop section-title">
|
|
<span class="name">.not( selector )</span> <span class="returns">Returns: <a class="return" href="http://docs.jquery.com/Types#jQuery">jQuery</a></span>
|
|
</h2>
|
|
<div class=" entry-details">
|
|
<p class="desc"><strong>Description: </strong>Remove elements from the set of matched elements.</p>
|
|
<ul class="signatures">
|
|
<li class="signature" id="not-selector">
|
|
<h4 class="name">
|
|
<span class="versionAdded">version added: <a href="/category/version/1.0/">1.0</a></span>.not( selector )</h4>
|
|
<p class="arguement"><strong>selector</strong>A string containing a selector expression to match elements against.</p>
|
|
</li>
|
|
<li class="signature" id="not-elements">
|
|
<h4 class="name">
|
|
<span class="versionAdded">version added: <a href="/category/version/1.0/">1.0</a></span>.not( elements )</h4>
|
|
<p class="arguement"><strong>elements</strong>One or more DOM elements to remove from the matched set.</p>
|
|
</li>
|
|
<li class="signature" id="not-functionindex">
|
|
<h4 class="name">
|
|
<span class="versionAdded">version added: <a href="/category/version/1.4/">1.4</a></span>.not( function(index) )</h4>
|
|
<p class="arguement"><strong>function(index)</strong>A function used as a test for each element in the set. <code>this</code> is the current DOM element.</p>
|
|
</li>
|
|
</ul>
|
|
<div class="longdesc">
|
|
<p>Given a jQuery object that represents a set of DOM elements, the <code>.not()</code> method constructs a new jQuery object from a subset of the matching elements. The supplied selector is tested against each element; the elements that don't match the selector will be included in the result.</p>
|
|
<p>Consider a page with a simple list on it:</p>
|
|
<pre>
|
|
<ul>
|
|
<li>list item 1</li>
|
|
<li>list item 2</li>
|
|
<li>list item 3</li>
|
|
<li>list item 4</li>
|
|
<li>list item 5</li>
|
|
</ul>
|
|
</pre>
|
|
<p>We can apply this method to the set of list items:</p>
|
|
<pre>$('li').not(':even').css('background-color', 'red');</pre>
|
|
<p>The result of this call is a red background for items 2 and 4, as they do not match the selector (recall that :even and :odd use 0-based indexing).</p>
|
|
<h4>Removing Specific Elements</h4>
|
|
<p>The second version of the <code>.not()</code> method allows us to remove elements from the matched set, assuming we have found those elements previously by some other means. For example, suppose our list had an id applied to one of its items:</p>
|
|
<pre>
|
|
<ul>
|
|
<li>list item 1</li>
|
|
<li>list item 2</li>
|
|
<li id="notli">list item 3</li>
|
|
<li>list item 4</li>
|
|
<li>list item 5</li>
|
|
</ul>
|
|
</pre>
|
|
<p>We can fetch the third list item using the native JavaScript <code>getElementById()</code> function, then remove it from a jQuery object:</p>
|
|
<pre>
|
|
$('li').not(document.getElementById('notli'))
|
|
.css('background-color', 'red');
|
|
</pre>
|
|
<p>This statement changes the color of items 1, 2, 4, and 5. We could have accomplished the same thing with a simpler jQuery expression, but this technique can be useful when, for example, other libraries provide references to plain DOM nodes.</p>
|
|
<p>As of jQuery 1.4, the <code>.not()</code> method can take a function as its argument in the same way that <code>.filter()</code> does. Elements for which the function returns <code>true</code> are excluded from the filtered set; all other elements are included.</p>
|
|
</div>
|
|
<h3>Examples:</h3>
|
|
<div id="entry-examples" class="entry-examples">
|
|
<div id="example-0">
|
|
<h4>Example: <span class="desc">Adds a border to divs that are not green or blue.</span>
|
|
</h4>
|
|
<pre><code class="example demo-code"><!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<style>
|
|
div { width:50px; height:50px; margin:10px; float:left;
|
|
background:yellow; border:2px solid white; }
|
|
.green { background:#8f8; }
|
|
.gray { background:#ccc; }
|
|
#blueone { background:#99f; }
|
|
</style>
|
|
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
|
</head>
|
|
<body>
|
|
<div></div>
|
|
<div id="blueone"></div>
|
|
<div></div>
|
|
<div class="green"></div>
|
|
|
|
<div class="green"></div>
|
|
<div class="gray"></div>
|
|
<div></div>
|
|
<script>
|
|
$("div").not(".green, #blueone")
|
|
.css("border-color", "red");
|
|
|
|
</script>
|
|
</body>
|
|
</html></code></pre>
|
|
<h4>Demo:</h4>
|
|
<div class="demo code-demo"></div>
|
|
</div>
|
|
<div id="example-1">
|
|
<h4>Example: <span class="desc">Removes the element with the ID "selected" from the set of all paragraphs.</span>
|
|
</h4>
|
|
<pre><code class="example">$("p").not( $("#selected")[0] )</code></pre>
|
|
</div>
|
|
<div id="example-2">
|
|
<h4>Example: <span class="desc">Removes the element with the ID "selected" from the set of all paragraphs.</span>
|
|
</h4>
|
|
<pre><code class="example">$("p").not("#selected")</code></pre>
|
|
</div>
|
|
<div id="example-3">
|
|
<h4>Example: <span class="desc">Removes all elements that match "div p.selected" from the total set of all paragraphs.</span>
|
|
</h4>
|
|
<pre><code class="example">$("p").not($("div p.selected"))</code></pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</body></html> |