CODEWITHSUNDEEP
jqueryattributesselectorundefined
Sebastien
Sebastien

Reputation: 1328

JQuery selector return undefined

I am doing a news feeds like thing that rotate news after 7 sec. I am using Jquery functions $().slideUp() and $().slideDown().

Here is my 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>

Here is what I have done so far:

//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);
        });

Each '.Nouvelles' have unique IDs That either start with 'F' for french or 'E' for english. I want to rotate and display ONLY the french ones for now. French and English news will alternate in a random pattern. So the next sibling of 'F1' could some day be 'F2' or 'E2'.

The problem I am having is with this line here:

//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'...

I cant get the id. If I alert($('.Nouvelles[id^="F"]').first()) it return a object. But If I alert($('.Nouvelles[id^="F"]').first().attr('id')) it return undefined. How can the id be undefine if in the Jquery selector I specificly ask for the element with an ID that start with 'F'???

does some one know where I am wrong??

Upvotes: 1

Views: 4766

Answers (1)

Schleis
Schleis

Reputation: 43790

Since you are adding the items in the ajax call, your selector is not getting any elements on ready.

You would get a jQuery object that would be contain no elements but would alert an object and have no id attribute.

Do a console.log($('.Nouvelles[id^="F"]').first().attr('id')) and examine the object. alert should not be used for debugging.

Upvotes: 2

Related Questions