Dynamic list break into two UL
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
I'm not very knowledgeable when it comes to JS/jQuery and could use a little help understanding what I need to do.
I am populating a modal when a link is clicked. When the link is clicked a UL is being created from a data attribute. The issue I am trying to solve is that when the link is clicked it is creating just one UL and I need it to be broken into two UL's. Here is a working codepen: https://codepen.io/west4me/pen/BGVgPy. The link to click is "View Regions".
I believe I need to break it into two around here:
"</h5></div><ul class='regionList'>" +
regionLis.join("") +
"</ul>"
If you could point me in the right direction I would appreciate it.
javascript jquery
asked Nov 26 '18 at 13:40
William CunninghamWilliam Cunningham
169213
add a comment |
I'm not very knowledgeable when it comes to JS/jQuery and could use a little help understanding what I need to do.
I am populating a modal when a link is clicked. When the link is clicked a UL is being created from a data attribute. The issue I am trying to solve is that when the link is clicked it is creating just one UL and I need it to be broken into two UL's. Here is a working codepen: https://codepen.io/west4me/pen/BGVgPy. The link to click is "View Regions".
I believe I need to break it into two around here:
"</h5></div><ul class='regionList'>" +
regionLis.join("") +
"</ul>"
If you could point me in the right direction I would appreciate it.
javascript jquery
asked Nov 26 '18 at 13:40
William CunninghamWilliam Cunningham
169213
what do you expect the other<ul>to look like?
– Andrew Lohr
Nov 26 '18 at 13:47
@AndrewLohr I'm just needing to make it into two, count how many li's then break it into two UL's. The lists can get pretty long and I would like to be able to have the two UL's side by side on desktop.
– William Cunningham
Nov 26 '18 at 13:54
So split your long list into how many shorter lists you want.
– epascarello
Nov 26 '18 at 13:58
@epascarello any advice on where I should do that in the code? Should I be using .split?
– William Cunningham
Nov 26 '18 at 14:07
add a comment |
I'm not very knowledgeable when it comes to JS/jQuery and could use a little help understanding what I need to do.
I am populating a modal when a link is clicked. When the link is clicked a UL is being created from a data attribute. The issue I am trying to solve is that when the link is clicked it is creating just one UL and I need it to be broken into two UL's. Here is a working codepen: https://codepen.io/west4me/pen/BGVgPy. The link to click is "View Regions".
I believe I need to break it into two around here:
"</h5></div><ul class='regionList'>" +
regionLis.join("") +
"</ul>"
If you could point me in the right direction I would appreciate it.
javascript jquery
asked Nov 26 '18 at 13:40
William CunninghamWilliam Cunningham
169213
I'm not very knowledgeable when it comes to JS/jQuery and could use a little help understanding what I need to do.
I am populating a modal when a link is clicked. When the link is clicked a UL is being created from a data attribute. The issue I am trying to solve is that when the link is clicked it is creating just one UL and I need it to be broken into two UL's. Here is a working codepen: https://codepen.io/west4me/pen/BGVgPy. The link to click is "View Regions".
I believe I need to break it into two around here:
"</h5></div><ul class='regionList'>" +
regionLis.join("") +
"</ul>"
If you could point me in the right direction I would appreciate it.
javascript jquery
javascript jquery
asked Nov 26 '18 at 13:40
William CunninghamWilliam Cunningham
169213
asked Nov 26 '18 at 13:40
William CunninghamWilliam Cunningham
169213
asked Nov 26 '18 at 13:40
William CunninghamWilliam Cunningham
169213
asked Nov 26 '18 at 13:40
William CunninghamWilliam Cunningham
169213
asked Nov 26 '18 at 13:40
William CunninghamWilliam Cunningham
169213
169213
what do you expect the other<ul>to look like?
– Andrew Lohr
Nov 26 '18 at 13:47
@AndrewLohr I'm just needing to make it into two, count how many li's then break it into two UL's. The lists can get pretty long and I would like to be able to have the two UL's side by side on desktop.
– William Cunningham
Nov 26 '18 at 13:54
So split your long list into how many shorter lists you want.
– epascarello
Nov 26 '18 at 13:58
@epascarello any advice on where I should do that in the code? Should I be using .split?
– William Cunningham
Nov 26 '18 at 14:07
add a comment |
what do you expect the other<ul>to look like?
– Andrew Lohr
Nov 26 '18 at 13:47
@AndrewLohr I'm just needing to make it into two, count how many li's then break it into two UL's. The lists can get pretty long and I would like to be able to have the two UL's side by side on desktop.
– William Cunningham
Nov 26 '18 at 13:54
So split your long list into how many shorter lists you want.
– epascarello
Nov 26 '18 at 13:58
@epascarello any advice on where I should do that in the code? Should I be using .split?
– William Cunningham
Nov 26 '18 at 14:07
what do you expect the other
<ul> to look like?– Andrew Lohr
Nov 26 '18 at 13:47
what do you expect the other
<ul> to look like?– Andrew Lohr
Nov 26 '18 at 13:47
@AndrewLohr I'm just needing to make it into two, count how many li's then break it into two UL's. The lists can get pretty long and I would like to be able to have the two UL's side by side on desktop.
– William Cunningham
Nov 26 '18 at 13:54
@AndrewLohr I'm just needing to make it into two, count how many li's then break it into two UL's. The lists can get pretty long and I would like to be able to have the two UL's side by side on desktop.
– William Cunningham
Nov 26 '18 at 13:54
So split your long list into how many shorter lists you want.
– epascarello
Nov 26 '18 at 13:58
So split your long list into how many shorter lists you want.
– epascarello
Nov 26 '18 at 13:58
@epascarello any advice on where I should do that in the code? Should I be using .split?
– William Cunningham
Nov 26 '18 at 14:07
@epascarello any advice on where I should do that in the code? Should I be using .split?
– William Cunningham
Nov 26 '18 at 14:07
add a comment |
1 Answer
1
active
oldest
votes
You can use splice() to split the array in half. For example
var firstHalf = regionLis.splice(0, Math.ceil(regionLis.length / 2));
This will make firstHalf contain the first half of the regionLis and the regionLis variable will now hold the second half.
then, the .append() for your modal will look like
.append(
"<div class='d-block'><h5 class='text-weight-bold'>" +
staffName +
"</h5></div><div class='d-block'><h5 class='font-weight-light'>" +
staffTitle +
"</h5></div><div class='ulContainer'><ul class='regionList'>" +
firstHalf.join("") +
"</ul></div>" +
"<div class='ulContainer'> <ul class='regionList'>" +
regionLis.join("") +
"</ul></div>"
);
notice the two new divs with class ulContainer and how the first one has firstHalf (the first half) and the second div has regionLis (the second half of the array). The two divs will need the below css to make the them align next to each other as well.
.ulContainer{
display:inline;
float:left;
}
Here is an updated codepen for you too
answered Nov 26 '18 at 14:19
Andrew LohrAndrew Lohr
3,91911631
Worked like a charm. Appreciate the assist on that one. Taught me something too.
– William Cunningham
Nov 26 '18 at 15:32
no problem, glad to help.
– Andrew Lohr
Nov 26 '18 at 15:43
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53482395%2fdynamic-list-break-into-two-ul%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
You can use splice() to split the array in half. For example
var firstHalf = regionLis.splice(0, Math.ceil(regionLis.length / 2));
This will make firstHalf contain the first half of the regionLis and the regionLis variable will now hold the second half.
then, the .append() for your modal will look like
.append(
"<div class='d-block'><h5 class='text-weight-bold'>" +
staffName +
"</h5></div><div class='d-block'><h5 class='font-weight-light'>" +
staffTitle +
"</h5></div><div class='ulContainer'><ul class='regionList'>" +
firstHalf.join("") +
"</ul></div>" +
"<div class='ulContainer'> <ul class='regionList'>" +
regionLis.join("") +
"</ul></div>"
);
notice the two new divs with class ulContainer and how the first one has firstHalf (the first half) and the second div has regionLis (the second half of the array). The two divs will need the below css to make the them align next to each other as well.
.ulContainer{
display:inline;
float:left;
}
Here is an updated codepen for you too
answered Nov 26 '18 at 14:19
Andrew LohrAndrew Lohr
3,91911631
Worked like a charm. Appreciate the assist on that one. Taught me something too.
– William Cunningham
Nov 26 '18 at 15:32
no problem, glad to help.
– Andrew Lohr
Nov 26 '18 at 15:43
add a comment |
You can use splice() to split the array in half. For example
var firstHalf = regionLis.splice(0, Math.ceil(regionLis.length / 2));
This will make firstHalf contain the first half of the regionLis and the regionLis variable will now hold the second half.
then, the .append() for your modal will look like
.append(
"<div class='d-block'><h5 class='text-weight-bold'>" +
staffName +
"</h5></div><div class='d-block'><h5 class='font-weight-light'>" +
staffTitle +
"</h5></div><div class='ulContainer'><ul class='regionList'>" +
firstHalf.join("") +
"</ul></div>" +
"<div class='ulContainer'> <ul class='regionList'>" +
regionLis.join("") +
"</ul></div>"
);
notice the two new divs with class ulContainer and how the first one has firstHalf (the first half) and the second div has regionLis (the second half of the array). The two divs will need the below css to make the them align next to each other as well.
.ulContainer{
display:inline;
float:left;
}
Here is an updated codepen for you too
answered Nov 26 '18 at 14:19
Andrew LohrAndrew Lohr
3,91911631
Worked like a charm. Appreciate the assist on that one. Taught me something too.
– William Cunningham
Nov 26 '18 at 15:32
no problem, glad to help.
– Andrew Lohr
Nov 26 '18 at 15:43
add a comment |
You can use splice() to split the array in half. For example
var firstHalf = regionLis.splice(0, Math.ceil(regionLis.length / 2));
This will make firstHalf contain the first half of the regionLis and the regionLis variable will now hold the second half.
then, the .append() for your modal will look like
.append(
"<div class='d-block'><h5 class='text-weight-bold'>" +
staffName +
"</h5></div><div class='d-block'><h5 class='font-weight-light'>" +
staffTitle +
"</h5></div><div class='ulContainer'><ul class='regionList'>" +
firstHalf.join("") +
"</ul></div>" +
"<div class='ulContainer'> <ul class='regionList'>" +
regionLis.join("") +
"</ul></div>"
);
notice the two new divs with class ulContainer and how the first one has firstHalf (the first half) and the second div has regionLis (the second half of the array). The two divs will need the below css to make the them align next to each other as well.
.ulContainer{
display:inline;
float:left;
}
Here is an updated codepen for you too
answered Nov 26 '18 at 14:19
Andrew LohrAndrew Lohr
3,91911631
You can use splice() to split the array in half. For example
var firstHalf = regionLis.splice(0, Math.ceil(regionLis.length / 2));
This will make firstHalf contain the first half of the regionLis and the regionLis variable will now hold the second half.
then, the .append() for your modal will look like
.append(
"<div class='d-block'><h5 class='text-weight-bold'>" +
staffName +
"</h5></div><div class='d-block'><h5 class='font-weight-light'>" +
staffTitle +
"</h5></div><div class='ulContainer'><ul class='regionList'>" +
firstHalf.join("") +
"</ul></div>" +
"<div class='ulContainer'> <ul class='regionList'>" +
regionLis.join("") +
"</ul></div>"
);
notice the two new divs with class ulContainer and how the first one has firstHalf (the first half) and the second div has regionLis (the second half of the array). The two divs will need the below css to make the them align next to each other as well.
.ulContainer{
display:inline;
float:left;
}
Here is an updated codepen for you too
answered Nov 26 '18 at 14:19
Andrew LohrAndrew Lohr
3,91911631
edited Nov 26 '18 at 14:25
answered Nov 26 '18 at 14:19
Andrew LohrAndrew Lohr
3,91911631
answered Nov 26 '18 at 14:19
Andrew LohrAndrew Lohr
3,91911631
answered Nov 26 '18 at 14:19
Andrew LohrAndrew Lohr
3,91911631
3,91911631
Worked like a charm. Appreciate the assist on that one. Taught me something too.
– William Cunningham
Nov 26 '18 at 15:32
no problem, glad to help.
– Andrew Lohr
Nov 26 '18 at 15:43
add a comment |
Worked like a charm. Appreciate the assist on that one. Taught me something too.
– William Cunningham
Nov 26 '18 at 15:32
no problem, glad to help.
– Andrew Lohr
Nov 26 '18 at 15:43
Worked like a charm. Appreciate the assist on that one. Taught me something too.
– William Cunningham
Nov 26 '18 at 15:32
Worked like a charm. Appreciate the assist on that one. Taught me something too.
– William Cunningham
Nov 26 '18 at 15:32
no problem, glad to help.
– Andrew Lohr
Nov 26 '18 at 15:43
no problem, glad to help.
– Andrew Lohr
Nov 26 '18 at 15:43
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53482395%2fdynamic-list-break-into-two-ul%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
what do you expect the other
<ul>to look like?– Andrew Lohr
Nov 26 '18 at 13:47
@AndrewLohr I'm just needing to make it into two, count how many li's then break it into two UL's. The lists can get pretty long and I would like to be able to have the two UL's side by side on desktop.
– William Cunningham
Nov 26 '18 at 13:54
So split your long list into how many shorter lists you want.
– epascarello
Nov 26 '18 at 13:58
@epascarello any advice on where I should do that in the code? Should I be using .split?
– William Cunningham
Nov 26 '18 at 14:07