Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 566
  • Last Modified:

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?
0
amoskittelson
Asked:
amoskittelson
  • 2
  • 2
1 Solution
 
Gurvinder Pal SinghCommented:
clear all cache, put an alert before the second console.log and then see what log comes in the console log
0
 
amoskittelsonAuthor Commented:
<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
 
Gurvinder Pal SinghCommented:
0
 
amoskittelsonAuthor Commented:
Thank you gurvinder372. I tried the same in Firefox with Firebug and received the expected results.
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now