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
Solved

Unexpected Chrome console.log() with jQuery

Posted on 2012-04-10
4
525 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

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

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

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…

856 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