CODEWITHSUNDEEP
jquery-selectors
EnderWiggins
EnderWiggins

Reputation: 390

Jquery Selector :nth-child

I have a setup like this: 

var count = 1;

function displayPoint(marker, index){
    $("#message").hide();

    var position = $($.goMap.mapId).data(marker).position;
    var markerOffset = overlay.getProjection().fromLatLngToDivPixel(position);

                    //console.log(count);
                    //console.log("li:not(:nth-child("+count+"))")
                        $("#message")
                            .fadeIn()
                            .css({ top:markerOffset.y, left:markerOffset.x })        
                            .children("li:not(:nth-child("+count+"))")
                            .hide();        
}

In the line: 

$("#message")
    .children("li:not(:nth-child(6))")
    .hide();

I am trying to remove everything except the needed child. And this works, But I need something like this: 

.children("li:not(:nth-child("+count+"))")

the selector needs to be variable. I have tried both double and single quotes, and it does not seem to work. Putting a constant selector works perfectly. I have even tried consoling out the count variable to see is that is the issue, count variable does what it should.
I can't see anything wrong in here. Any suggestions? Any other selectors perhaps? or some other elegant solution that I can't come up with. Any help is appreciated.

This is my code running [live][1]: When a variable is used, the first one seems to work fine, on second iteration, everything falls apart

This is the full code, it is a little big:

<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
<title>sideBar and create own infowindow / goMap</title> 



 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
 <script src="http://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.gomap-1.3.2.min.js"></script> 


<script type="text/javascript" charset="utf-8">

            $(document).ready(function(){
                var c = 0;
                var count = 1;

                $("#map").goMap({
                    address :'San Francisco, CA',
                    zoom:9,
                    maptype: 'ROADMAP',
                    navigationControl: false,
                    scrollwheel: false,
                    mapTypeControl: false
                });


                setTimeout(function() {
                            // marker points
                var markers = [{  
                            address :'San Francisco, CA',
                            icon: 'img/pixel.png',
                        },{ 
                            address :'Sacramento, CA',
                            icon: 'img/pixel.png',                          
                        },{ 
                            address :'Berkeley, CA',    
                            icon: 'img/pixel.png',
                        },{ 
                            address :'Santa Rosa, CA',      
                            icon: 'img/pixel.png',
                        },{ 
                            address :'Palo Alto, CA',       
                            icon: 'img/pixel.png',
                        },{ 
                            address :'San Jose, CA',        
                            icon: 'img/pixel.png',      
                        },{ 
                            address :'Fremont, CA',     
                            icon: 'img/pixel.png',              
                        },{ 
                            address :'New York City,NY',        
                            icon: 'img/pixel.png',      
                        },{ 
                            address :'Philadelphia,PA',     
                            icon: 'img/pixel.png',  
                        },{ 
                            address :'Newark,NJ',       
                            icon: 'img/pixel.png',      
                        },{ 
                            address :'Trenton,NJ',      
                            icon: 'img/pixel.png',      
                        },{ 
                            address :'Washington,DC',       
                            icon: 'img/pixel.png',  
                        },{ 
                            address :'Baltimore,MD',        
                            icon: 'img/pixel.png',                              
                        }];


                    //set markers
                    for (var i = 0; i < 13; i++) {
                        $.goMap.createMarker(markers[i]);
                    }


                overlay = $.goMap.overlay;

                //  move through set points ( markers)
                    setInterval(function() {
                        if (c>12) c=0;
                        marker = $.goMap.markers[c];
                        displayPoint(marker, c);
                        c = c+1;    
                    },5000);

                    $("#message").appendTo(overlay.getPanes().floatPane);


                    $.post('tweetlist.php', function(response) {
                                        $("#message")
                                            .append(response)
                                            .hide();
                                    });


                    function displayPoint(marker, index){                                                           


                        var position = $($.goMap.mapId).data(marker).position;                      
                        var markerOffset = overlay.getProjection().fromLatLngToDivPixel(position);

                        //console.log(count);
                        console.log("li:not(:nth-child("+count+"))")
                            $("#message")
                                .fadeIn()
                                .css({ top:markerOffset.y, left:markerOffset.x })        
                                .children("li:not(:nth-child("+count+"))")
                                .hide();

                            $.goMap.map.panTo(position);
                            count = count +1;       
                    }

                },500);
            });
</script>
<style type="text/css" media="screen">
            #map { width:900px; height:500px; }
            #message {
                                        position:absolute;
                                        background:#555; 
                                        color:#fff;
                                        font-size:12px;
                                        width:300px;
                                        padding: 10px;
                                    }
            #twitter_container a{
                                        color:#0066CC;
                                        font-weight:bold;
                                        }   
            .twitter_status{
                                height:60px;
                                padding:6px;
                                border-bottom:solid 1px #DEDEDE;
                                }       
            .twitter_image{
                                float:left;
                                margin-right:14px;
                                margin-bottom:10px;
                                border:solid 2px #DEDEDE;
                                width:50px;
                                height:50px;
                                }                       
</style>
</head> 
<body> 
<div id="wrap">
    <div id="header">

    </div>
    <div id="content">

        <div id="map"></div>
        <ul id="message"></ul>
        <div id="footer"></div>
    </div>
</div> 
</body> 
</html>

I use ajax here to get twitter data: 

                 $.post('tweetlist.php', function(response) {
                                    $("#message")
                                        .append(response)
                                        .hide();
                                });

And I get back this response: 

    foreach ($json->results as $tweet )

{   
    $text = $tweet->text;
    $user = $tweet->from_user_name;
    $profile_image_url = $tweet->profile_image_url;
    echo "<li>";
    echo "<img src=".$profile_image_url." class = 'twitter_image' >";
    echo "<a href='http://www.twitter.com/".$user."'>".$user."</a>:";
    echo "<div class = 'twitter_status'>".$text."</div>";   
    echo "</li>";
}
  [1]: http://servernomics.com/map.html

Upvotes: 1

Views: 1379

Answers (1)

OnaBai
OnaBai

Reputation: 40887

Use the following displayPoint function:

function displayPoint(marker, index) {
    var position = $($.goMap.mapId).data(marker).position;
    var overlay = $.goMap.overlay;
    var markerOffset = overlay.getProjection().fromLatLngToDivPixel(position);

    $.goMap.map.panTo(position);
    $("#message")
            .fadeIn()
            .css({ top: markerOffset.y, left: markerOffset.x });
    $("li", "#message").hide();
    $("li:nth-child(" + count + ")").show();
    count = count + 1;
}

Originally all the elements are shown but then you hide all but the first, then you hide all but the second BUT you didn't show the previous so after first iteration nothing is shown.

Upvotes: 1

Related Questions