Solved

Unexpected Chrome console.log() with jQuery

Posted on 2012-04-10
4
519 Views
Last Modified: 2012-04-10
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?
0
Comment
Question by:amoskittelson
  • 2
  • 2
4 Comments
 
LVL 40

Expert Comment

by:gurvinder372
ID: 37828078
clear all cache, put an alert before the second console.log and then see what log comes in the console log
0
 

Author Comment

by:amoskittelson
ID: 37828168
<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!
0
 
LVL 40

Accepted Solution

by:
gurvinder372 earned 500 total points
ID: 37828739
0
 

Author Closing Comment

by:amoskittelson
ID: 37829594
Thank you gurvinder372. I tried the same in Firefox with Firebug and received the expected results.
0

Featured Post

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

705 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now