• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 246
  • Last Modified:

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

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
areyouready344
Asked:
areyouready344
  • 25
  • 18
1 Solution
 
leakim971PluritechnicianCommented:
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
 
areyouready344Author Commented:
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
 
areyouready344Author Commented:
I just want to make sure the data can fit within the defined DIV space of 400px (#insertData).
0
Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

 
leakim971PluritechnicianCommented:
did you try the code with the alert? it should help you
0
 
areyouready344Author Commented:
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
 
areyouready344Author Commented:
The question when widthN is greater than sizeWidth, how do I break out of the each() loop given (widthN < sizeWidth)?
0
 
leakim971PluritechnicianCommented:
:)
0
 
leakim971PluritechnicianCommented:
>how do I break out of the each() loop given (widthN < sizeWidth)?

to break use : return true;

0
 
areyouready344Author Commented:
did not work, I placed after the closing if statement.
0
 
leakim971PluritechnicianCommented:
if(widthN>sizeWidth) return true;
0
 
areyouready344Author Commented:
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
 
leakim971PluritechnicianCommented:
>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
 
leakim971PluritechnicianCommented:
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
 
areyouready344Author Commented:
Are you saying the code should look like this:

if(widthN>sizeWidth) return true;
{
                        totalWidth = totalWidth + widthN;
                        $('#insertData2').append('<li>'  + totalWidth + "  " + textW + '</li>');            
}
0
 
areyouready344Author Commented:
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
 
leakim971PluritechnicianCommented:
>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
 
areyouready344Author Commented:
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
 
areyouready344Author Commented:
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
 
leakim971PluritechnicianCommented:
my bad use return false;
0
 
areyouready344Author Commented:
     if(widthN < sizeWidth)
                  {
                        totalWidth = totalWidth + widthN;
                        $('#insertData2').append('<li>'  + totalWidth + "  " + textW + '</li>');            
                       return false;
                  }else
                  {
                        return false;
                  }              


Output:

96 aaaaaaaaa
0
 
leakim971PluritechnicianCommented:
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
 
areyouready344Author Commented:
I tried your latest code with the alert function added but the alert never gets executed.

Only this output:

96 aaaaaaaaa
0
 
leakim971PluritechnicianCommented:
remove the first return false;
0
 
areyouready344Author Commented:
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
 
leakim971PluritechnicianCommented:
you removed the second
0
 
areyouready344Author Commented:
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
 
leakim971PluritechnicianCommented:
please provide a link to your page
0
 
areyouready344Author Commented:
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
 
leakim971PluritechnicianCommented:
I don't understand the purpose of your script but the code itslef run fine

0
 
areyouready344Author Commented:
What do you mean the code runs fine? You mean  you don't see the problem.
0
 
areyouready344Author Commented:
what is your output? The alert function is working?
0
 
areyouready344Author Commented:
I'm running this code under Firefox 6
0
 
areyouready344Author Commented:
I see what I'm doing wrong. The problem was with my logic.
0
 
leakim971PluritechnicianCommented:
>I see what I'm doing wrong. The problem was with my logic.

yes, the width did not really change
0
 
areyouready344Author Commented:
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
 
areyouready344Author Commented:
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
 
leakim971PluritechnicianCommented:
maybe by replacing :  if(widthN < sizeWidth)
by :  if(totalWidth < sizeWidth)
0
 
areyouready344Author Commented:
I tried totalWidth but I don't get the original value of widthN
0
 
areyouready344Author Commented:
the width values needs to be accurate
0
 
leakim971PluritechnicianCommented:
0
 
areyouready344Author Commented:
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
 
leakim971PluritechnicianCommented:
0
 
areyouready344Author Commented:
You are the best Leakim, thanks for taking the time in really understanding this problem and working with my lack of experience.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

  • 25
  • 18
Tackle projects and never again get stuck behind a technical roadblock.
Join Now