jquery attribute selector = vs !=

I'm puzzled by the output of these. I get:
9
7
0

I thought = and != were opposites as selectors. The fact that != works implies it is in fact checking for the value 2 and spaces or the like aren't messing it up. I've created the third one by copy pasting the working line and removing the exclamation point so I know it isn't a typo. Any ideas what is going on here?

I have a workaround that lets me proceed, but no insight to why. The above returns 2. (9-7). Which is correct. But it seems like it should be exactly the same as the = selector.

Can you post an SSCCE that exhibits the behavior?

Yes. I didn't include one before because I thought it would be obvious. After all, I'm sure the = selector works as it should.

The following example displays:
2 - expected
1 - expected
0 - the problem
1- expected

I'm on Mac Lion/Safari. Same behavior on Mac Lion/Chrome. This is from a proof of concepts for robotics (not work) so I didn't spend the time getting every shred of "business" meaning out of it.

<head>
<title>SSCE</title>
<script type="text/javascript"
	src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
	
<script>
	
	
	function generateChampionsLeaders() {
		alert("# matching divs " + $('div[data-fll-core-award="true"] input').size());  
		alert("# matching divs by not value " + $('div[data-fll-core-award="true"] input[value!="2"]').size());  
		alert("# matching divs by value " + $('div[data-fll-core-award="true"] input[value="2"]').size()); 
		alert("# matching divs test " + $('div[data-fll-core-award="true"] input:not([value!="2"])').size()); 
		
	}
	
	$(document).ready(function() {
		
			$("#champion_leaders").bind("click", function() {
				generateChampionsLeaders();
			});
			
	
	});
</script>
</head>
<body>
	
	<section id="status">
	<hr />
	 <div id="design" data-fll-core-award="true" data-category="robot">
	Type 2 into box: <input id="rank_1" size="6"  /><br />
	Type 3 into box: <input id="rank_2" size="6"  /><br />
	</div>
	
	<hr />
	<section>
	
	<input id="champion_leaders" type="button" value="Click me!" />
	
	<hr />
	</section>
	</section>
	
</body>
</html>

Maybe this will make you understand what is happening

http://jsfiddle.net/2DFA2/ [Needs console open]

Compare the initial load vs the button click with the logs. Notice anything?

Eric

I notice that != looks like it uses the udpated values and = does not. And that jfiddle is cool.

This doesn't help though as I still don't see why. Or even if that is the problem.

The value property does not get updated when the value changes, hence why the selector fails. I think there is a jQuery bug logged for this. You need to use filter()

http://jsfiddle.net/2DFA2/1/

Eric

Ugh. Ok thanks. It's odd that it works for !=.

Eric Pascarello wrote:The value property does not get updated when the value changes ...

Actually, the value property does update when the control value is changed; it's the value attribute that doesn't change, and that, of course, is what the CSS selector is checking against.