Question

我有问题。当html是静态的而不是附加时，此代码有效，但是当附加数据时，它不会...

我附加了JSON文档中的数据，如下所示：

$('#articles').append('<article><time pubdate="pubdate">' + pubDate + '</time><h2><a href="#">' + headline + '</a></h2><p>' + bodyText + '</p></article>');

在此之后，我创建了一个包含第一篇文章的变量：

var currentElement = $("article:first");

然后我想访问currentElement.position（）：

console.log(currentElement.position());

但它以未定义的形式返回...它是否与未经过数据删除有关？我做错了什么？

感谢您的帮助！

编辑：这是整个代码：

$(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());

再次编辑：

当我

console.log(currentElement);

我明白了：

[prevObject：x.fn.x.init [1]，context：document，selector：“article：first”，jquery：“1.10.2”，constructor：function ...] 上下文：文件长度：0 prevObject：x.fn.x.init [1] 选择器：“文章：第一” proto ：对象[0]

不要真的了解那些东西，但认为这可能会有所帮助

更新：如果我像这样执行setTimeOut，我可以访问元素：

setTimeout(function()
        {
        var currentElement = $("article:first");
        console.log(currentElement);
        console.log(currentElement.position().left);
        }, 1000);

Answer 1

应为$("article:first-child")

修改

不要介意:first在jQuery中工作。

Answer 2

请让你的ajax返回数据并创建文章元素。如果没有创建任何元素，那么它将返回undefined。

Answer 3

在成功功能之前，尝试在ajax调用中添加：async: false。

$.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>');
            }
        }

无法访问附加数据的属性

3 个答案:

修改