JQuery 选择器返回未定义答案

【问题标题】：JQuery selector return undefinedJQuery 选择器返回未定义
【发布时间】：2013-07-30 15:06:19
【问题描述】：

我正在做一个新闻提要，比如在 7 秒后轮换新闻。我正在使用 Jquery 函数 $().slideUp() 和 $().slideDown()。

这是我的 HTML：

<div id='F1' class='Nouvelles' style='background-image:url(../ImagesAnnonces/google_chrome.png); background-size:contain;'>
    <h2>test</h2>
    <p>test</p>
</div>
<div id='E2' class='Nouvelles' style='background-image:url(../ImagesAnnonces/images.jpeg); background-size:contain;'>
    <h2>test</h2>
    <p>test</p>
</div>
<div id='F3' class='Nouvelles' style='background-image:url(../ImagesAnnonces/); background-size:contain;'>
    <h2>test 2 FR</h2>
    <p></p>
</div>
<div id='F4' class='Nouvelles' style='background-image:url(../ImagesAnnonces/asdfgfhjkl.jpeg); background-size:contain;'>
    <h2></h2>
    <p></p>
</div>

这是我到目前为止所做的：

//This is just a AJAX call that generate all the '.Nouvelle' which translate from french to news.

$(document).ready
        (function(){
            $.ajax(
            {
                url:"handlingPub.php",
                type:"GET",
                dataType:"text",
                contentType:"application/x-www-form-urlencoded;charset=UTF-8",
                success:function(code_html, status)
                            {
                                $("#divPub").append(code_html);
                                $(".Nouvelles").css(
                                    {
                                        height:"90px",
                                        display:"none",
                                        padding:"0px",
                                        margin:"10px",
                                        overflow:"hidden",
                                        border:"solid white 2px"
                                    });
                                $('.Nouvelles[id^="F"]:lt(1)').css("display", "block");
                                $(".Nouvelles h2").css({padding:"0px", margin:"0px"});
                            } 
            });

//the problem seems to be here...
//Get the first id
            var id = $('.Nouvelles[id^="F"]').first().attr('id').substring(1);
            alert(id);//This return 'undefined'...
//Every 7 sec.
            var int = self.setInterval
            (function(){
                var max = 0;
                //Get the number of news (I know I could use size() or length I will change it later)                   
                $('.Nouvelles[id^="F"]').each(function(){max++;});
                if(max > 1)//If there is more than 1 news
                {                       
                        $(".Nouvelles[id=F"+id+"]").slideUp();//slide it up
                        if(id >= max)//If the id of the news is bigger than the last one set it to the first
                        {
                            id = $('.Nouvelles[id^="F"]:first').attr('id').substring(1);
                        }
                        else//else go get the next
                        {
                            id = $('.Nouvelles[id^="F"]').next('.Nouvelles[id="F'+id+'"]').attr('id').substring(1);
                        }

                        $('.Nouvelles[id="F'+id+'"]').slideDown();//slide the next news down
                }
            }
            , 7000);
        });

每个“.Nouvelles”都有唯一的 ID，以“F”开头（法语）或“E”（英语）开头。我现在只想旋转和显示法国的。法语和英语新闻将以随机模式交替出现。所以“F1”的下一个兄弟可能有一天会是“F2”或“E2”。

我遇到的问题是这里的这一行：

//the problem seems to be here...
//Get the first id
            var id = $('.Nouvelles[id^="F"]').first().attr('id').substring(1);
            alert(id);//This return 'undefined'...

我无法获取 ID。如果我alert($('.Nouvelles[id^="F"]').first()) 它返回一个对象。但是如果我alert($('.Nouvelles[id^="F"]').first().attr('id')) 它返回未定义。如果在 Jquery 选择器中我特别要求 ID 以 'F' 开头的元素，如何取消定义 id ？？？

有人知道我哪里错了吗？？

【问题讨论】：

attr() 函数已经返回集合中第一个元素的值，因此不需要调用first()。但这应该与您的问题无关。
您是否在 ajax 调用中添加项目？如果ready 的页面上没有任何内容，您将获得一个不包含任何元素但会提醒对象且没有id 属性的jQuery 对象。执行console.log($('.Nouvelles[id^="F"]').first().attr('id')) 并检查对象。 alert 不应用于调试。
你的权利@Schleis 我正在我的 AJAX 调用中添加项目，现在它确实更有意义。我很惭愧，我想我会躺在这里死去 XD :D 非常感谢你！发表您的评论作为答案，我会给它一个复选标记！！！

标签： jquery attributes selector undefined

【解决方案1】：

由于您在 ajax 调用中添加项目，因此您的选择器没有在 ready 上获取任何元素。

你会得到一个 jQuery 对象，它不包含任何元素，但会提醒一个对象并且没有 id 属性。

执行console.log($('.Nouvelles[id^="F"]').first().attr('id')) 并检查对象。 alert 不应该用于调试。

【讨论】：