?
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
Medium Priority
?
240 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Get real performance insights from real users

Key features:
- Total Pages Views and Load times
- Top Pages Viewed and Load Times
- Real Time Site Page Build Performance
- Users’ Browser and Platform Performance
- Geographic User Breakdown
- And more

 
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 2000 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

On Demand Webinar: Networking for the Cloud Era

Did you know SD-WANs can improve network connectivity? Check out this webinar to learn how an SD-WAN simplified, one-click tool can help you migrate and manage data in the cloud.

Question has a verified solution.

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

I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
This article discusses how to create an extensible mechanism for linked drop downs.
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…
Suggested Courses

801 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