• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 244
  • 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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
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

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

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