Solved

The javascript if condition continues progress even if the condition is false inside a jquery each method, why?

Posted on 2011-09-29
43
237 Views
Last Modified: 2012-05-12
The javascript if condition continues to process even if the condition is false inside a jquery each method, why?
How do I break out of the loop when the condition is false, I tried putting a "return false" statement after the closing if condition but does not help.

$('#ul_a li').each(function()
            {
                  var widthS = $(this).width();
                  var textW = $(this).text();
                  
                  var widthN = parseInt(widthS,10);
                  if(widthN < sizeWidth)
                  {
                        totalWidth = totalWidth + widthN;
                        $('#insertData2').append('<li>' + textW + '</li>');      
                  }
               });
)};
0
Comment
Question by:areyouready344
  • 25
  • 18
43 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 36815716
Where do you init sizeWidth?

Try this to understand :


$('#ul_a li').each(function()
            {
                  var widthS = $(this).width();
                  var textW = $(this).text();
                  
                  var widthN = parseInt(widthS,10);
alert("sizeWidth:"+sizeWidth+"\nwidthN:"+widthN+"\nwidthN < sizeWidth :"+(widthN < sizeWidth))
                  if(widthN < sizeWidth)
                  {
                        totalWidth = totalWidth + widthN;
                        $('#insertData2').append('<li>' + textW + '</li>');      
                  }
               });
)};

Open in new window

0
 

Author Comment

by:areyouready344
ID: 36816194
Thanks Leakim, like this...

$(document).ready(function()
{
      $('#container').click(function()
      {
            var totalWidth = 0;
            var sizeWidth = 400;
            $('#ul_a li').each(function()
            {
                  var widthS = $(this).width();
                  var textW = $(this).text();
                  
                  var widthN = parseInt(widthS,10);
                  if(widthN < sizeWidth)
                  {
                        totalWidth = totalWidth + widthN;
                        $('#insertData2').append('<li>' + textW + '</li>');      
                  }
               });
         });
});
0
 

Author Comment

by:areyouready344
ID: 36816209
I just want to make sure the data can fit within the defined DIV space of 400px (#insertData).
0
Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
LVL 82

Expert Comment

by:leakim971
ID: 36816214
did you try the code with the alert? it should help you
0
 

Author Comment

by:areyouready344
ID: 36816255
the alert help me figured out this problem of when widthN is greater than sizeWidth (widthN < sizeWidth) it continues to add the extra data
0
 

Author Comment

by:areyouready344
ID: 36816271
The question when widthN is greater than sizeWidth, how do I break out of the each() loop given (widthN < sizeWidth)?
0
 
LVL 82

Expert Comment

by:leakim971
ID: 36816272
:)
0
 
LVL 82

Expert Comment

by:leakim971
ID: 36816279
>how do I break out of the each() loop given (widthN < sizeWidth)?

to break use : return true;

0
 

Author Comment

by:areyouready344
ID: 36816296
did not work, I placed after the closing if statement.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 36816379
if(widthN>sizeWidth) return true;
0
 

Author Comment

by:areyouready344
ID: 36816584
the same problem continues,

            if(widthN < sizeWidth)
                  {
                        totalWidth = totalWidth + widthN;
                        $('#insertData2').append('<li>'  + totalWidth + "  " + textW + '</li>');            
                        return true;
                  }

Output:

      96 aaaaaaaaa
    192 aaaaaaaaa
    288 aaaaaaaaa
    384 aaaaaaaaa
    480 aaaaaaaaa - did not need this output
    570 aaaaaaaaa - do not need this output

This output I want is this because 384 is less than 400 (sizeWidth):

      96 aaaaaaaaa
    192 aaaaaaaaa
    288 aaaaaaaaa
    384 aaaaaaaaa
0
 
LVL 82

Expert Comment

by:leakim971
ID: 36816603
>The question when widthN is greater than sizeWidth, how do I break out of the each() loop given (widthN < sizeWidth)?

if(widthN>sizeWidth) return true;

the same problem continues,

            if(widthN < sizeWidth)
                  {
                        totalWidth = totalWidth + widthN;
                        $('#insertData2').append('<li>'  + totalWidth + "  " + textW + '</li>');            
                        return true;
                  }
0
 
LVL 82

Expert Comment

by:leakim971
ID: 36816636
if(widthN>sizeWidth) return true;
if(widthN < sizeWidth)
                  {
                        totalWidth = totalWidth + widthN;
                        $('#insertData2').append('<li>'  + totalWidth + "  " + textW + '</li>');            
                        return true;
                  }

or :


if(widthN < sizeWidth)
                  {
                        totalWidth = totalWidth + widthN;
                        $('#insertData2').append('<li>'  + totalWidth + "  " + textW + '</li>');            
                        return true;
                  }
else {
        return true;
}
0
 

Author Comment

by:areyouready344
ID: 36816648
Are you saying the code should look like this:

if(widthN>sizeWidth) return true;
{
                        totalWidth = totalWidth + widthN;
                        $('#insertData2').append('<li>'  + totalWidth + "  " + textW + '</li>');            
}
0
 

Author Comment

by:areyouready344
ID: 36816660
still does not work....

if(widthN>sizeWidth) return true;
{
                        totalWidth = totalWidth + widthN;
                        $('#insertData2').append('<li>'  + totalWidth + "  " + textW + '</li>');            
}

    96 aaaaaaaaa
    192 aaaaaaaaa
    288 aaaaaaaaa
    384 aaaaaaaaa
    480 aaaaaaaaa
    570 aaaaaaaaa
0
 
LVL 82

Expert Comment

by:leakim971
ID: 36816753
>Are you saying the code should look like this:

no no reading your comment : >The question when widthN is greater than sizeWidth, how do I break out of the each() loop given (widthN < sizeWidth)?

you need one of this :

if(widthN>sizeWidth) return true;
if(widthN < sizeWidth)
                  {
                        totalWidth = totalWidth + widthN;
                        $('#insertData2').append('<li>'  + totalWidth + "  " + textW + '</li>');            
                        return true;
                  }

or :


if(widthN < sizeWidth)
                  {
                        totalWidth = totalWidth + widthN;
                        $('#insertData2').append('<li>'  + totalWidth + "  " + textW + '</li>');            
                        return true;
                  }
else {
        return true;
}
0
 

Author Comment

by:areyouready344
ID: 36817252
Still not working...

if(widthN < sizeWidth)
                  {
                        totalWidth = totalWidth + widthN;
                        $('#insertData2').append('<li>'  + totalWidth + "  " + textW + '</li>');            
                        return true;
                  }else
                  {
                        return true;
                  }               
Output:

    96 aaaaaaaaa
    192 aaaaaaaaa
    288 aaaaaaaaa
    384 aaaaaaaaa
    480 aaaaaaaaa
    570 aaaaaaaaa
0
 

Author Comment

by:areyouready344
ID: 36817257
Still not working...

if(widthN>sizeWidth) return true;
if(widthN < sizeWidth)
                  {
                        totalWidth = totalWidth + widthN;
                        $('#insertData2').append('<li>'  + totalWidth + "  " + textW + '</li>');            
                        return true;
                  }

Output:

    96 aaaaaaaaa
    192 aaaaaaaaa
    288 aaaaaaaaa
    384 aaaaaaaaa
    480 aaaaaaaaa
    570 aaaaaaaaa
0
 
LVL 82

Expert Comment

by:leakim971
ID: 36817293
my bad use return false;
0
 

Author Comment

by:areyouready344
ID: 36817345
     if(widthN < sizeWidth)
                  {
                        totalWidth = totalWidth + widthN;
                        $('#insertData2').append('<li>'  + totalWidth + "  " + textW + '</li>');            
                       return false;
                  }else
                  {
                        return false;
                  }              


Output:

96 aaaaaaaaa
0
 
LVL 82

Expert Comment

by:leakim971
ID: 36817359
can you confirm the value in the alert?

 if(widthN < sizeWidth)
                  {
                        totalWidth = totalWidth + widthN;
                        $('#insertData2').append('<li>'  + totalWidth + "  " + textW + '</li>');            
                       return false;
                  }else
                  {
alert("sizeWidth:"+sizeWidth+"\nwidthN:"+widthN+"\nwidthN < sizeWidth :"+(widthN < sizeWidth))
                        return false;
                  }       

Open in new window

0
 

Author Comment

by:areyouready344
ID: 36817397
I tried your latest code with the alert function added but the alert never gets executed.

Only this output:

96 aaaaaaaaa
0
 
LVL 82

Expert Comment

by:leakim971
ID: 36817430
remove the first return false;
0
 

Author Comment

by:areyouready344
ID: 36817445
Same results as before, no execution of the alert function and same output after removing the return false;

Output:

96 aaaaaaaaa

            if(widthN < sizeWidth)
                  {
                        totalWidth = totalWidth + widthN;
                        $('#insertData2').append('<li>'  + totalWidth + "  " + textW + '</li>');            
                             return false;
                  }else
                  {
                        alert("sizeWidth:"+sizeWidth+"\nwidthN:"+widthN+"\nwidthN < sizeWidth :"+(widthN < sizeWidth));
                  }    
0
 
LVL 82

Expert Comment

by:leakim971
ID: 36817449
you removed the second
0
 

Author Comment

by:areyouready344
ID: 36817489
The alert function never gets executed under all conditions

if top:              return false  
else bottom:   return false


if top:              return false  
else bottom:  


if top:                
else bottom:   return false


if top:                
else bottom:  
0
 
LVL 82

Expert Comment

by:leakim971
ID: 36817561
please provide a link to your page
0
 

Author Comment

by:areyouready344
ID: 36817601
Just  a simple test script


<HTML>
<HEAD>
<TITLE>Layout Example</TITLE>
<SCRIPT type="text/javascript" src="jquery-1.6.2.min.js"></SCRIPT>
<script type="text/javascript">
$(document).ready(function()
{
      $('#container').click(function()
      {
            var totalWidth = 0;
            var sizeWidth = 400;
            $('#ul_a li').each(function()
            {
                  var widthS = $(this).width();
                  var textW = $(this).text();
                  
                  var widthN = parseInt(widthS,10);
                  if(widthN < sizeWidth)
                  {
                        totalWidth = totalWidth + widthN;
                        $('#insertData2').append('<li>'  + totalWidth + "  " + textW + '</li>');            
                        
                  }else
                  {
                        alert("sizeWidth:"+sizeWidth+"\nwidthN:"+widthN+"\nwidthN < sizeWidth :"+(widthN < sizeWidth));
                        
                  }    
            });
         });
});
</script>
<style>
#container
{
      height: 30px;
      width: 150px;
      background-color: black;
      color: white;
      text-align: center;
      position: absolute;
}
#verticalAlign
{
      height: 20px;
      position: absolute;
      top: 50%;
      margin-top: -10px;
      margin-left: 5px;      
}
ul
{
        list-style-type: none;
      margin: 0px;
      padding: 0px;
}
#ul_a li
{
      display: inline;
      margin: 0px;
      padding: 0px;
}
#insertData1
{
      width: 400px;
      height: 300px;
      background-color: black;
      color: white;
      margin-top: 20px;
}
#insertData2
{
      list-style-type: none;
}
</style>
</HEAD>
<BODY>
<div id="container">
      <div id="verticalAlign"> This is a test</div>
</div>
<div>
      <ul id="ul_a">
                  <li>aaaaaaaaa </li>
                  <li>aaaaaaaaa </li>
                  <li>aaaaaaaaa </li>
                  <li>aaaaaaaaa </li>
                  <li>aaaaaaaaa </li>
                  <li>aaaaaaaaa </li>
                  </ul>
<p></p>
</div>
<div id="insertData1"><ul id="insertData2"></ul></div>
</div>
</BODY>
</HTML>
0
 
LVL 82

Expert Comment

by:leakim971
ID: 36817669
I don't understand the purpose of your script but the code itslef run fine

0
 

Author Comment

by:areyouready344
ID: 36818144
What do you mean the code runs fine? You mean  you don't see the problem.
0
 

Author Comment

by:areyouready344
ID: 36818150
what is your output? The alert function is working?
0
 

Author Comment

by:areyouready344
ID: 36818165
I'm running this code under Firefox 6
0
 

Author Comment

by:areyouready344
ID: 36818230
I see what I'm doing wrong. The problem was with my logic.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 36818403
>I see what I'm doing wrong. The problem was with my logic.

yes, the width did not really change
0
 

Author Comment

by:areyouready344
ID: 36818429
correct Leakim, the width of variable widthN is not getting appended.. I'm not sure how to solve that but that is the problem.
0
 

Author Comment

by:areyouready344
ID: 36818473
What the script should being is making sure the added li data width does not exceed  the width of a 400px div where it will be inserted.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 36818505
maybe by replacing :  if(widthN < sizeWidth)
by :  if(totalWidth < sizeWidth)
0
 

Author Comment

by:areyouready344
ID: 36818513
I tried totalWidth but I don't get the original value of widthN
0
 

Author Comment

by:areyouready344
ID: 36818520
the width values needs to be accurate
0
 
LVL 82

Expert Comment

by:leakim971
ID: 36818570
0
 

Author Comment

by:areyouready344
ID: 36818602
Thanks leamkim for you attention on this but too much li data is being inserted into the 400px div, I don't want the data to go to the next line, here is the latest on how I really would like, http://jsfiddle.net/nBsfm/7/
0
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 36818623
0
 

Author Comment

by:areyouready344
ID: 36818636
You are the best Leakim, thanks for taking the time in really understanding this problem and working with my lack of experience.
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

808 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question