Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Unexpected Chrome console.log() with jQuery

Posted on 2012-04-10
4
Medium Priority
?
543 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
4 Comments
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
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:
Gurvinder Pal Singh earned 2000 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

Not sure which OpenStack Certification to get?

So you’ve realized you might want to get certified in OpenStack, but you’re not sure what the benefits might be or even which one you should take. You know there are several certification courses you can choose from, but how do you know which one is right for you?

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

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