The difference between $ (this) and $ ("# id") in each loop in jquery

Question

I am new to jquery. I know the question is stupid, but I don’t understand any concept here. Here's the problem:

$("input.integers").each(function(index) { console.log("----"); console.log($(this).attr('id') + " " + $(this).val()); console.log($(this).attr('id') + " " + $("#"+$(this).attr('id')).val()); // the next log is here just to show a direct selection. I'm concerned about the two logs above this one console.log($("#myId").attr('id'), $("#myId").val()); that.setModelData($(this).attr('id'), $(this).val()); }); 

Here's the conclusion:

 PhantomJS 1.6 (Linux) LOG: '----' PhantomJS 1.6 (Linux): Executed 61 of 90 PhantomJS 1.6 (Linux) LOG: 'myId ' PhantomJS 1.6 (Linux): Executed 61 of 90 PhantomJS 1.6 (Linux) LOG: 'myId 123' PhantomJS 1.6 (Linux): Executed 61 of 90 PhantomJS 1.6 (Linux) LOG: [ 'myId', '123' ] 

tag input. Why is $(this).val() empty and $("#"+$(this).attr('id')).val() contains the correct value?

UPDATE:

Karma Test:

 it('the model must be updated', function(){ $("#myId").val("123"); $("#save-process").click(); server.respond(); expect(fdtView.model.get('myId')).toBe("123"); }); 

Commit:

 <input id="myId" name="myId" class="integers" type="text" /> 

Answer 1

Ok, I have to say that it was a problem with karma, not jquery.

We use Backbone.js, and the view loads the template into the view definition:

 template : _.template($("#mytemplate").html()), 

Karma when loading tests will be an exception if it does not find devices, so we added lights to the file called fixtures.js at startup:

 loadFixtures('viewtemplate.html','mytemplate.html'); 

(@Blame) Someone added a jasmine test suite to this code beforeEach :

 beforeEach( function() { loadFixtures('currentStepContainerFixture.html', 'mytemplate.html'); 

Thus, the scales were loaded twice .

When I used in my code:

  console.log($(this).attr('id') + " " + $(this).val()); console.log($(this).attr('id') + " " + $("#"+$(this).attr('id')).val()); 

Basically, the first log was about the current item, while the second log was about the first entry that has this identifier.

That is why we had this terrible behavior. I have to say that some kind of exception thrown for two elements with the same identifier would be helpful.

 PhantomJS 1.6 (Linux): Executed 61 of 90 PhantomJS 1.6 (Linux) LOG: 'myId ' --> current $(this) PhantomJS 1.6 (Linux): Executed 61 of 90 PhantomJS 1.6 (Linux) LOG: 'myId 123' --> first occurrence of "#myId" 

I do not deserve these four points, the problem was between the monitor and the keyboard. Excuse me: (

Answer 2

In your loop, this corresponds to the $ ("input.integers") selector. So jquery has this selector in mind. $ ("# myId") is a unique selector and for each jquery loop it searches for this element and parses it. it is just a coincidence that the two elements are the same because you are html code:

 <input class="integers" id="myId" /> 

However, if you have many contributions with the same CSS class, this one will be different.

An example with multiple inputs.

HTML code:

 <input class="integers" value="toto"/> <input class="integers" value="titi"/> <input class="integers" value="tata"/> <input class="integers" value="tutu"/> 

JS Code:

 $("input.integers").each(function(index) { console.log("Value = "+$(this).val); } 

Console Log:

 Value = toto Value = titi Value = tata Value = tutu 

So, to answer your question, if this.val() is different from $("#"+$(this).attr('id')).val()) , then the selector that loads this is not very good.