Link to home
Start Free TrialLog in
Avatar of amoskittelson
amoskittelsonFlag for United States of America

asked on

Unexpected Chrome console.log() with jQuery

Given
<style>
	ui li { color: red;}
	.emphasis { color: green;}
</style>

<ul>
	<li>hello</li>
	<li>hello 2</li>
</ul>

<script>
	console.log($('ul li'))
	$('ul li').addClass('emphasis');
	console.log($('ul li'))
</script>

Open in new window

and looking in Chrome's console I would expect to see
jQuery1.html:19[<li>¿hello¿</li>¿, <li>¿hello 2¿</li>¿]
jQuery1.html:21[<li class=¿"emphasis">¿hello¿</li>¿, <li class=¿"emphasis">¿hello 2¿</li>]

Open in new window

Instead I see
jQuery1.html:19[<li class=¿"emphasis">¿hello¿</li>¿, <li class=¿"emphasis">¿hello 2¿</li>¿]
jQuery1.html:21[<li class=¿"emphasis">¿hello¿</li>¿, <li class=¿"emphasis">¿hello 2¿</li>]

Open in new window

Why is this?
Avatar of Gurvinder Pal Singh
Gurvinder Pal Singh
Flag of India image

clear all cache, put an alert before the second console.log and then see what log comes in the console log
Avatar of amoskittelson

ASKER

<script>
	console.log($('ul li'));
	$('ul li').addClass('emphasis');
	alert('okay');
	console.log($('ul li'));
</script>

Open in new window

Console Log:
jQuery1.html:19[HTMLLIElement, HTMLLIElement]
jQuery1.html:22[<li class=¿"emphasis">¿hello¿</li>¿, <li class=¿"emphasis">¿hello 2¿</li>¿
]

Open in new window

HTMLLIElement:
accessKey: ""
attributes: NamedNodeMap
0: Attr
length: 1
__proto__: NamedNodeMap
baseURI: "file:///home/User/Desktop/temp/jQuery1.html"
childElementCount: 0
childNodes: NodeList[1]
children: HTMLCollection[0]
classList: DOMTokenList
className: "emphasis"
clientHeight: 20
clientLeft: 0
clientTop: 0
clientWidth: 1384
contentEditable: "inherit"
dataset: DOMStringMap
dir: ""
draggable: false
firstChild: Text
firstElementChild: null
hidden: false
id: ""
innerHTML: "hello"
innerText: "hello"
isContentEditable: false
lang: ""
lastChild: Text
lastElementChild: null
localName: "li"
namespaceURI: "http://www.w3.org/1999/xhtml"
nextElementSibling: HTMLLIElement
nextSibling: Text
nodeName: "LI"
nodeType: 1
nodeValue: null
offsetHeight: 20
offsetLeft: 48
offsetParent: HTMLBodyElement
offsetTop: 8
offsetWidth: 1384
onabort: null
onbeforecopy: null
onbeforecut: null
onbeforepaste: null
onblur: null
onchange: null
onclick: null
oncontextmenu: null
oncopy: null
oncut: null
ondblclick: null
ondrag: null
ondragend: null
ondragenter: null
ondragleave: null
ondragover: null
ondragstart: null
ondrop: null
onerror: null
onfocus: null
oninput: null
oninvalid: null
onkeydown: null
onkeypress: null
onkeyup: null
onload: null
onmousedown: null
onmousemove: null
onmouseout: null
onmouseover: null
onmouseup: null
onmousewheel: null
onpaste: null
onreset: null
onscroll: null
onsearch: null
onselect: null
onselectstart: null
onsubmit: null
onwebkitfullscreenchange: null
outerHTML: "<li class="emphasis">hello</li>"
outerText: "hello"
ownerDocument: HTMLDocument
parentElement: HTMLUListElement
parentNode: HTMLUListElement
prefix: null
previousElementSibling: null
previousSibling: Text
scrollHeight: 20
scrollLeft: 0
scrollTop: 0
scrollWidth: 1384
spellcheck: true
style: CSSStyleDeclaration
tabIndex: -1
tagName: "LI"
textContent: "hello"
title: ""
type: ""
value: 0
webkitdropzone: ""
__proto__: HTMLLIElement

Open in new window

Now I'm even more curious!
ASKER CERTIFIED SOLUTION
Avatar of Gurvinder Pal Singh
Gurvinder Pal Singh
Flag of India image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Thank you gurvinder372. I tried the same in Firefox with Firebug and received the expected results.