I've trouble with this array selecting between two numbers in Javascript

Question

Well , I'm working on a Project and I've trouble with choosing between two numbers

to make it clear this is my code:

var forthumbnail = ["tum1", "tum2", "tum3", "tum4", "tum5", "tum6", "tum7", "tum8", "tum9", "tum10", "tum11", "tum12"];

$(".pwpep-groups").each(function() {

  for (var i in forthumbnail) {
    if (i == 0 || i == 5 || i == 8 || i == 10) {
      if (i == 0) {
        var groupname = "group1";
      }
      if (i == 5) {
        var groupname = "group2";
      }
      if (i == 8) {
        var groupname = "group3";
      }
      if (i == 10) {
        var groupname = "group4";
      }

      $(".pwpep-groups").prepend('<div class="pwpep-group"><div class="pwpep-group-title">' + groupname + '</div></div>');

    }
    var imgadrs = forthumbnail[i];
    var icons = $('.pwpep-group');
    icons.append('<i class="imgset" style="background-image: url(' + imgadrs + ');">' + '(c' + i + ')' + '</i>');

  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="pwpc pwpcep">
  <div class="pwpep">
    <div class="pwpc-body-container">
      <div class="pwpc-body">
        <div class="pwpep-groups">
          <div class="pwpep-group">

          </div>
        </div>
      </div>
    </div>
  </div>
</div>

I Want to :

forthumnail arrays:

number between: 0 and 4 be in group 1 like

Group 1:

(c0)(c1)(c2)(c3)(c4)

Group 2: numbers between 5 and 8 called group 2

and ... as you can see in js code:)

but The Problem is when i look the result, all of the numbers from the number I defined in if(i==2) get printed in all groups:(

like this:

Problem

group1:(c1)(c2)(c3)....(c12)

group2:(c1)(c2)(c3)....(c12)

group3:(c1)(c2)(c3)....(c12)

How can i set number between a and b to put it in specific group as you can see the code, in this situation!

Help pls!!!:(

Barmar · Accepted Answer · 2020-11-30 21:50:04Z

1

var icons = $('.pwpep-group');

sets icons to all the pwpep-group DIVs that you've created so far, not just the one you created last. You can use `

var icons = $('.pwpep-group').first();

to get the last created one, since you put it at the front of the list.

var forthumbnail = ["tum1", "tum2", "tum3", "tum4", "tum5", "tum6", "tum7", "tum8", "tum9", "tum10", "tum11", "tum12"];

$(".pwpep-groups").each(function() {

  for (var i in forthumbnail) {
    if (i == 0 || i == 5 || i == 8 || i == 10) {
      if (i == 0) {
        var groupname = "group1";
      }
      if (i == 5) {
        var groupname = "group2";
      }
      if (i == 8) {
        var groupname = "group3";
      }
      if (i == 10) {
        var groupname = "group4";
      }

      $(".pwpep-groups").prepend('<div class="pwpep-group"><div class="pwpep-group-title">' + groupname + '</div></div>');

    }
    var imgadrs = forthumbnail[i];
    var icons = $('.pwpep-group').first();
    icons.append('<i class="imgset" style="background-image: url(' + imgadrs + ');">' + '(c' + i + ')' + '</i>');

  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="pwpc pwpcep">
  <div class="pwpep">
    <div class="pwpc-body-container">
      <div class="pwpc-body">
        <div class="pwpep-groups">
          <div class="pwpep-group">

          </div>
        </div>
      </div>
    </div>
  </div>
</div>

answered Nov 30, 2020 at 21:50

Barmar

789k57 gold badges555 silver badges669 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mahdi Over a year ago

Hi Barmar, Thanks Man:) for your edit and for your answer, I'm new to this community and don't know how to work with this editor.

Gabriele Petrioli · Accepted Answer · 2020-11-30 21:50:25Z

1

There are two issues

one is with var icons = $('.pwpep-group'); which will select all .pwpep-group elements, and then you append to it so it appends to all groups.

You need to target only the group you want, something like

var forthumbnail = ["tum1", "tum2", "tum3", "tum4", "tum5", "tum6", "tum7", "tum8", "tum9", "tum10", "tum11", "tum12"];

$(".pwpep-groups").each(function() {
  var groupname;
  var groupNode;
  for (var i in forthumbnail) {
    if (i == 0 || i == 5 || i == 8 || i == 10) {
      if (i == 0) {
        var groupname = "group1";
      }
      if (i == 5) {
        var groupname = "group2";
      }
      if (i == 8) {
        var groupname = "group3";
      }
      if (i == 10) {
        var groupname = "group4";
      }

      groupNode = $('<div class="pwpep-group"><div class="pwpep-group-title">' + groupname + '</div></div>');
      $(".pwpep-groups").prepend(groupNode);

    }
    var imgadrs = forthumbnail[i];
    groupNode.append('<i class="imgset" style="background-image: url(' + imgadrs + ');">' + '(c' + i + ')' + '</i>');

  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="pwpc pwpcep">
  <div class="pwpep">
    <div class="pwpc-body-container">
      <div class="pwpc-body">
        <div class="pwpep-groups">
          <div class="pwpep-group">

          </div>
        </div>
      </div>
    </div>
  </div>
</div>

answered Nov 30, 2020 at 21:50

Gabriele Petrioli

197k35 gold badges275 silver badges331 bronze badges

1 Comment

Mahdi Over a year ago

Hey Gabriele Petrioli:) your answer is also helped me out, I think both of answers are correct, but which one is better?

Daniel González Fernández · Accepted Answer · 2020-11-30 22:07:34Z

1

This solution is much clearer and easy to understand, and adapts to any scenario (groups of variable size)

var forthumbnail = ["tum1", "tum2", "tum3", "tum4", "tum5", "tum6", "tum7", "tum8", "tum9", "tum10", "tum11", "tum12", "tum13", "tum14"];

// You would set this variable to any value you'd like: In this case,
// group 1 would have 4 items, group 2 would have 1 item, and so on
const groupSizes = [4,1,3,2,4]; 

let groups = []
for (let i=0, lastIndex=0; i < groupSizes.length; i++, lastIndex+=groupSizes[i]) {  
    const end = lastIndex + groupSizes[i];
    groups.push(forthumbnail.slice(lastIndex, end))
}

console.log(groups);

/* The console will show the output:
[
  [ 'tum1', 'tum2', 'tum3', 'tum4' ],
  [ 'tum2' ],
  [ 'tum5', 'tum6', 'tum7' ],
  [ 'tum7', 'tum8' ],
  [ 'tum11', 'tum12', 'tum13', 'tum14' ]
]
*/

for (var group in groups) {
 // your code for each groupd (like inserting in the DOM div)
    for (var item in group) {
    // your code for each item in a group (like inserting in the DOM a styled button)
     }
}

edited Nov 30, 2020 at 22:07

answered Nov 30, 2020 at 21:58

Daniel González Fernández

3522 silver badges8 bronze badges

3 Comments

Barmar Over a year ago

The groups don't have the same sizes, you can't use a single groupSize variable.

Daniel González Fernández Over a year ago

@Barmar I've just edited my answer: I think it solved the problem you stated. Thanks for the clarification

Mahdi Over a year ago

@DanielGonzálezFernández Thank you both for helping me out, all of the answers are just fine, I'll use them:)

Collectives™ on Stack Overflow

I've trouble with this array selecting between two numbers in Javascript

3 Answers 3

1 Comment

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related