It should be $("article:first-child")
Edit
Never mind :first
works in jQuery.
Question
I have a problem. This code worked when the html was static and not appended, but when append data it does not...
I have appended data from a JSON-document like so:
$('#articles').append('<article><time pubdate="pubdate">' + pubDate + '</time><h2><a href="#">' + headline + '</a></h2><p>' + bodyText + '</p></article>');
After this I create a variable containing the first article:
var currentElement = $("article:first");
Then I want to access currentElement.position():
console.log(currentElement.position());
But it comes back as undefined... It worked with unappended data? What am I doing wrong?
Thanks for the help!
EDIT: Here is the entire code:
$(document).ready(onDocumentReady);
function onDocumentReady()
{
console.log('Document ready');
$.ajax({
type:'GET',
url:'data.json',
dataType:'json',
success: jsonParser
});
function jsonParser(json)
{
$.getJSON('data.json',runData)
function runData(data)
{
$.each(data.article, writeData)
function writeData(keys,values)
{
var pubDate = values.pubDate;
var headline = values.headline;
var bodyText = values.bodyText;
$('#articles').append('<article><time pubdate="pubdate">' + pubDate + '</time><h2><a href="#">' + headline + '</a></h2><p>' + bodyText + '</p></article>');
}
}
}
var currentElement = $("article:first");
console.log(currentElement.position());
EDIT AGAIN:
When I
console.log(currentElement);
I get:
[prevObject: x.fn.x.init[1], context: document, selector: "article:first", jquery: "1.10.2", constructor: function…] context: document length: 0 prevObject: x.fn.x.init[1] selector: "article:first" proto: Object[0]
Don't really understand that stuff, but thought it might help
UPDATE: If I do a setTimeOut like this, I am able to access the element:
setTimeout(function()
{
var currentElement = $("article:first");
console.log(currentElement);
console.log(currentElement.position().left);
}, 1000);
No correct solution
OTHER TIPS
It should be $("article:first-child")
Never mind :first
works in jQuery.
Please make your ajax is returning data and article elements are getting created . If no elements are getting created then it will return undefined.
Before the success function, try to add: async: false
in your ajax call.
$.ajax({
type:'GET',
url:'data.json',
dataType:'json',
async:false,
success: runData(data)
});
function runData(data){
$.each(data.article, writeData)
function writeData(keys,values){
var pubDate = values.pubDate;
var headline = values.headline;
var bodyText = values.bodyText;
$('#articles').append('<article><time pubdate="pubdate">' + pubDate + '</time><h2><a href="#">' + headline + '</a></h2><p>' + bodyText + '</p></article>');
}
}