Web Analytics Made Easy - StatCounter can't figure out what I'm missing - CodingForum

Announcement

Collapse
No announcement yet.

can't figure out what I'm missing

Collapse
X
Collapse
 
  • Page of 1
  • Filter
  • Time
  • Show
Clear All
new posts
Previous template Next
  • #1

    jQuery can't figure out what I'm missing

    Hi, I have this piece of javascript inserted after a list of <li></li> tags it's supposed to work it's magic on. It should find the list tags with no content and delete them and then remove all except the first 5 instances of <li></li>
    Link to jQuery is in the <head> and the list is generated by a piece of PHP - which seems to work fine. The list pops up but it's way too long and filled with empty <li>'s

    Code:
    <div class="facebook">
				<h2>Facebook</h2>
				<ul>
<li>1</li> <!-- example text-->
<li>2</li>
<li></li>
<li>4</li>
<li>5</li>
<li></li>
<li>7</li>
<li>8</li>
				</ul>
				<script type="text/javascript">
				<!-- $(document).ready(function() {
				$('.facebook ul').find('li').each( function(){
				if($(this).html().length == 0){
				$(this).remove();
				}
				});	
				$('.facebook ul').find('li').slice(5).remove();  
				}); -->
				</script>
				</div>
    I've stared at it for too long and can't see what I'm missing. I'm very rusty at JS, so it might be something blatantly obvious hehe

    Any help is much appreciated
    Tags: None
  • #2
    you see your <!-- and --> ? Those are comments. Thats commenting out the first and last line of your script. Thus, it fails. i think you were going for CDATA eg:

    Code:
    				<script type="text/javascript">
				//<![CDATA[
				$(document).ready(function() {
				$('.facebook ul').find('li').each( function(){
				if($(this).html().length == 0){
				$(this).remove();
				}
				});	
				$('.facebook ul').find('li').slice(5).remove();  
				}); 
				//]]>
				</script>
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

    Comment

    • #3
      It makes sense, but I have tried with CDATA without <!-- and also none of those two. Still no magic... Other than that, the code looks ok right?

      Thanks for the reply though.

      Comment

      • #4
        this works fine for me:

        Code:
        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Maraudox</title>
</head>
<body>

<div class="facebook">
<h2>Facebook</h2>
<ul>
<li>1</li> 
<li>2</li>
<li></li>
<li>4</li>
<li>5</li>
<li></li>
<li>7</li>
<li>8</li>
</ul>
</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function() {
	$('.facebook ul').find('li').each( function(){
		if($(this).html().length == 0){
			$(this).remove();
		}
	});	
$('.facebook ul').find('li').slice(5).remove();  
}); 
</script>

</body>
</html>
        is there something else in your code messing it up?
        Stop making things so hard on yourself.
        i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

        Comment

        • #5
          Indeed it does, works like a charm

          I expected it to work with the jQuery src in the header but it should be next to the script.

          Thank you so much for your help!

          Comment

          • #6
            shouldn't need the find() by the way, could just do

            - also document ready should generally only be used in the head
            Code:
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Maraudox</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function() {
	$('.facebook ul li').each( function(){
		if($(this).html().length == 0){
			$(this).remove();
		}
	});	
$('.facebook ul li').slice(5).remove();  
}); 
</script>
</head>
<body>

<div class="facebook">
<h2>Facebook</h2>
<ul>
<li>1</li> 
<li>2</li>
<li></li>
<li>4</li>
<li>5</li>
<li></li>
<li>7</li>
<li>8</li>
</ul>
</div>



</body>
</html>
            - Firebug is a web developers best friend! - Learn it, Love it, use it!
            - Validate your code! - JQ/JS troubleshooting
            - Using jQuery with Other Libraries - Jslint for Jquery/other JS library users

            Comment

            Previous template Next
            Working...
            X
            😀
            🥰
            🤢
            😎
            😡
            👍
            👎