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
233 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
Comment Utility
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
Comment Utility
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
Comment Utility
I just want to make sure the data can fit within the defined DIV space of 400px (#insertData).
0
 
LVL 82

Expert Comment

by:leakim971
Comment Utility
did you try the code with the alert? it should help you
0
 

Author Comment

by:areyouready344
Comment Utility
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
Comment Utility
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
Comment Utility
:)
0
 
LVL 82

Expert Comment

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

to break use : return true;

0
 

Author Comment

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

Expert Comment

by:leakim971
Comment Utility
if(widthN>sizeWidth) return true;
0
 

Author Comment

by:areyouready344
Comment Utility
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
Comment Utility
>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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
>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
Comment Utility
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
Comment Utility
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
Comment Utility
my bad use return false;
0
 

Author Comment

by:areyouready344
Comment Utility
     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
Comment Utility
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
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 

Author Comment

by:areyouready344
Comment Utility
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
Comment Utility
remove the first return false;
0
 

Author Comment

by:areyouready344
Comment Utility
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
Comment Utility
you removed the second
0
 

Author Comment

by:areyouready344
Comment Utility
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
Comment Utility
please provide a link to your page
0
 

Author Comment

by:areyouready344
Comment Utility
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
Comment Utility
I don't understand the purpose of your script but the code itslef run fine

0
 

Author Comment

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

Author Comment

by:areyouready344
Comment Utility
what is your output? The alert function is working?
0
 

Author Comment

by:areyouready344
Comment Utility
I'm running this code under Firefox 6
0
 

Author Comment

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

Expert Comment

by:leakim971
Comment Utility
>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
Comment Utility
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
Comment Utility
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
Comment Utility
maybe by replacing :  if(widthN < sizeWidth)
by :  if(totalWidth < sizeWidth)
0
 

Author Comment

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

Author Comment

by:areyouready344
Comment Utility
the width values needs to be accurate
0
 
LVL 82

Expert Comment

by:leakim971
Comment Utility
0
 

Author Comment

by:areyouready344
Comment Utility
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
Comment Utility
0
 

Author Comment

by:areyouready344
Comment Utility
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 Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

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…
Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
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…

743 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

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now