You are here

jQuery tests

jQuery is a beautiful idea and lacks just a few important features so here are tests to demonstrate some problems and potential ways around the problems.

Test 1 tests <div></div>
Test 2 tests <div> </div>
Test 3 tests <div> </div>
Test 4 tests <div> </div>
Test 5 tests <div>5</div>
Test 6 tests <div><strong></strong></div>
Test 7 tests <div><strong>x</strong></div>

The code shown on this page is the code running in this page. If you see something odd, it could be jQuery working differently in your Web browser. Please add comments with your observations and questions.

Test 1

We use the following empty division in test 1. The outer division with the id, test-1, helps jQuery locate our test then jQuery can find the actual test division, the inner division.

<div id="test-1"><div></div></div>

The following jQuery selects the outer division with id test-1 then selects all the elements in the outer division then selects the first of those elements, which is our empty division.

jQuery("#test-1").children().first()

The following Javascript statement saves the jQuery selection as variable test we can use for several tests.

var test = jQuery("#test-1").children().first();

The following table shows the additional jQuery options we are testing. The first test in the table, test.children(), is equivalent to jQuery("#test-1").children().first().children().

Test	Result

What can we conclude from the test? There are a lot of web pages recommending you test for .length == 0 but .length produces 1 from an empty element. .empty() produces an object instead of a result. .children().length, .text().length, and .val().length look promising but .children().length is not obvious and is illogical.

Test 2

We use the following empty division in test 2. This test has just one difference from test 1. The empty division contains a space.

<div id="test-2"><div> </div></div>

The following table shows the additional jQuery options we are testing.

Test	Result

What can we conclude from the test? The same tests work. The DOM, Document Object Model, used in Javascript follows HTML and truncates spaces within elements to a singlespace. jQuery then treats the empty element as not empty.

Test 3

There are times when you want whitespace characters treated as text and other times when you want them ignored. The HTML/DOM rules for whitespace, including spaces, are too illogical to use in a test for empty.

We use the following empty division in test 3. This test has one difference from test 2. The empty division contains a whitespace character that is a new line instead of the space.

<div id="test-3"><div>

</div></div>

The following table shows the additional jQuery options we are testing.

Test	Result

What can we conclude from the test? The same tests work and the same tests fail. The HTML/DOM processing treats whitespace as a string sometimes and other times as nothing. jQuery thinks it is not empty.

Test 4

We use the following almost empty division in test 4. This test has one difference from test 3. The empty division contains a non breaking space,  , instead of the newline.

<div id="test-4"><div> </div></div>

The following table shows the additional jQuery options we are testing.

Test	Result

The same tests work and the same tests fail. A non breaking space is treated as a space.

Test 5

We use the following almost empty division in test 5. The one difference from test 4 is a valid character, t, instead of the non breaking space.

<div id="test-5"><div>t</div></div>

The following table shows the additional jQuery options we are testing.

Test	Result

The tests that worked before now fail to indicate the presence of text.

Test 6

We use the following almost empty division in test 6. The one difference from test 5 is a HTML element, <strong></strong>, instead of the text character.

<div id="test-6"><div><strong></strong></div></div>

The following table shows the additional jQuery options we are testing.

Test	Result

test.children().length finally changes. Clearly .children() counts only HTML elements, not text. There is XML processing code that counts text as a child of the XML element containing the text. DOM, Javascript, and jQuery are different.

Test 7

We use the following almost empty division in test 7. The one difference from test 6 is the HTML element, <strong></strong>, contains a character, x.

<div id="test-7"><div><strong>x</strong></div></div>

The following table shows the additional jQuery options we are testing.