Start Free Trial

asked on

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>');
                  }
           });
)};

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

ASKER

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>');
                  }
           });
     });
});

ASKER

I just want to make sure the data can fit within the defined DIV space of 400px (#insertData).

did you try the code with the alert? it should help you

ASKER

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

ASKER

The question when widthN is greater than sizeWidth, how do I break out of the each() loop given (widthN < sizeWidth)?

:)

>how do I break out of the each() loop given (widthN < sizeWidth)?

to break use : return true;

ASKER

did not work, I placed after the closing if statement.

if(widthN>sizeWidth) return true;

ASKER

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

>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;
}

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;
}

ASKER

Are you saying the code should look like this:

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

ASKER

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

>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;
}

ASKER

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

ASKER

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

my bad use return false;

ASKER

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

Output:

96 aaaaaaaaa

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

ASKER

I tried your latest code with the alert function added but the alert never gets executed.

Only this output:

96 aaaaaaaaa

remove the first return false;

ASKER

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));
}

you removed the second

ASKER

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:

please provide a link to your page

ASKER

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>

I don't understand the purpose of your script but the code itslef run fine

ASKER

What do you mean the code runs fine? You mean you don't see the problem.

ASKER

what is your output? The alert function is working?

ASKER

I'm running this code under Firefox 6

ASKER

I see what I'm doing wrong. The problem was with my logic.

>I see what I'm doing wrong. The problem was with my logic.

yes, the width did not really change

ASKER

correct Leakim, the width of variable widthN is not getting appended.. I'm not sure how to solve that but that is the problem.

ASKER

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.

maybe by replacing : if(widthN < sizeWidth)
by : if(totalWidth < sizeWidth)

ASKER

I tried totalWidth but I don't get the original value of widthN

ASKER

the width values needs to be accurate

check this : http://jsfiddle.net/nBsfm/1/

ASKER

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/

ASKER CERTIFIED SOLUTION

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

ASKER

You are the best Leakim, thanks for taking the time in really understanding this problem and working with my lack of experience.