How can i wrap exactly half of the div's with another div using jquery or javascript
I have this
<div class="post">1</div>
<div class="post">2</div>
<div class="post">3</div>
<div class="post">4</div>
<div class="post">5</div>
<div class="post">6</div>
I want this
<div class="wrap">
<div class="post">1</div>
<div class="post">2</div>
<div class="post">3</div>
</div>
<div class="wrap">
<div class="post">4</div>
<div class="post">5</div>
<div class="post">6</div>
</div>
Try using this:
var posts = $('.post'),
postCount = posts.length,
postHalf = Math.round(postCount/2),
wrapHTML = '<div class="wrap"></div>';
posts.slice(0, postHalf).wrapAll(wrapHTML); // .slice(0, 3)
posts.slice(postHalf, postCount).wrapAll(wrapHTML); // .slice(3, 6)
This selects all .post, gets the number of elements found then halves that value to get the splitting point. It then uses .slice() to select a specific range of elements and .wrapAll() to wrap each selection in <div class="wrap"></div>.
Here it is working: http://jsfiddle.net/ekzrb/
Related
Let's say I got 6 divs, and their current order is 1 to 6, how do I reorder them to make it become 612345?
I've tried to store them into a variable and use getElementsByClassName, then use the slice method and the insertAdjacentElement method but it couldn't work...
const btn = document.querySelector('.reorder');
const elm = document.getElementsByClassName('items');
const lastIndexOfElm = elm.length -1
function reorder() {
let newElm = [...elm].slice(0, lastIndexOfElm);
elm[lastIndexOfElm].insertAdjacentElement('afterend', newElm);
}
btn.addEventListener('click', reorder)
<button class="reorder">Reorder</button>
<div class="items">1</div>
<div class="items">2</div>
<div class="items">3</div>
<div class="items">4</div>
<div class="items">5</div>
<div class="items">6</div>
if you want to move the last item of ".items" to the first item, this code may help you.
const btn = document.querySelector('.reorder');
const elm = document.getElementsByClassName('items');
const lastIndexOfElm = elm.length -1
function reorder() {
let lastElm = elm[lastIndexOfElm];
elm[lastIndexOfElm].remove();
document.body.insertBefore(lastElm, elm[0]);
}
btn.addEventListener('click', reorder)
<button class="reorder">Reorder</button>
<div class="items">1</div>
<div class="items">2</div>
<div class="items">3</div>
<div class="items">4</div>
<div class="items">5</div>
<div class="items">6</div>
It may or may not work for your situation, but another possibility is putting them all in a flexbox and using the CSS order property to change the ordering:
<div style="display: flex;">
<div style="order: -1">1</div> <!-- first -->
<div style="order: 10">2</div> <!-- last -->
<div>3</div>
<div>4</div>
</div>
Then in Javascript you only need to adjust the CSS style's order property to change the ordering dynamically.
Using Puppeteer I need to select the hour and the minutes to schedule a post from a widget
The HTML code of the widget is this:
<div class="vdatetime-time-picker">
<div class="vdatetime-time-picker__list vdatetime-time-picker__list--hours">
<div class="vdatetime-time-picker__item vdatetime-time-picker__item--selected">00</div>
<div class="vdatetime-time-picker__item">01</div>
<div class="vdatetime-time-picker__item">02</div>
<div class="vdatetime-time-picker__item">03</div>
<div class="vdatetime-time-picker__item">04</div>
<div class="vdatetime-time-picker__item">05</div>
<div class="vdatetime-time-picker__item">06</div>
<div class="vdatetime-time-picker__item">07</div>
<div class="vdatetime-time-picker__item">08</div>
<div class="vdatetime-time-picker__item">09</div>
<div class="vdatetime-time-picker__item">10</div>
<div class="vdatetime-time-picker__item">11</div>
<div class="vdatetime-time-picker__item">12</div>
<div class="vdatetime-time-picker__item">13</div>
<div class="vdatetime-time-picker__item">14</div>
<div class="vdatetime-time-picker__item">15</div>
<div class="vdatetime-time-picker__item">16</div>
<div class="vdatetime-time-picker__item">17</div>
<div class="vdatetime-time-picker__item">18</div>
<div class="vdatetime-time-picker__item">19</div>
<div class="vdatetime-time-picker__item">20</div>
<div class="vdatetime-time-picker__item">21</div>
<div class="vdatetime-time-picker__item">22</div>
<div class="vdatetime-time-picker__item">23</div>
</div>
<div class="vdatetime-time-picker__list vdatetime-time-picker__list--minutes">
<div class="vdatetime-time-picker__item">00</div>
<div class="vdatetime-time-picker__item">05</div>
<div class="vdatetime-time-picker__item">10</div>
<div class="vdatetime-time-picker__item">15</div>
<div class="vdatetime-time-picker__item">20</div>
<div class="vdatetime-time-picker__item">25</div>
<div class="vdatetime-time-picker__item">30</div>
<div class="vdatetime-time-picker__item">35</div>
<div class="vdatetime-time-picker__item vdatetime-time-picker__item--selected">40</div>
<div class="vdatetime-time-picker__item">45</div>
<div class="vdatetime-time-picker__item">50</div>
<div class="vdatetime-time-picker__item">55</div>
</div>
</div>
Let's say I need to select 15:15.
I know with Xpath I can select the inner text with
const xpathHour = "//div[text()='15']";
the problem is that when selecting the minutes, being a multiple of 5, it would select the hour (again) because is the first element Puppeteer would find with the text of 15.
Their parent elements are different so how can I get in Xpath the same result as this one?
document.querySelector('.vdatetime-time-picker__list--hours .vdatetime-time-picker__item').innerText === "15"
You're probably looking for:
const xpathMinute = "(//div[text()='15'])[2]";
That is the second div with "15" text.
() are important, because [] operator has higher precedence.
I have a pattern like that:
<section>
<div data-id="39"></div>
<div data-id="31"></div>
<div data-id="57"></div>
<div data-id="10"></div>
<div data-id="27"></div>
<div data-id="5"></div>
<div data-id="89"></div>
</section>
That contains some data that are live updated via AJAX. Sometimes, it may happen to receive from the server a data updated with the same id of another one in the section, and since it's the same id, I need to remove the old data to avoid multiple datas and keep just the updated one.
For example, I receive an update with data-id 27 and I insert at the top:
<section>
<div data-id="27"></div>
<div data-id="39"></div>
<div data-id="31"></div>
<div data-id="57"></div>
<div data-id="10"></div>
<div data-id="27"></div>
<div data-id="5"></div>
<div data-id="89"></div>
</section>
After inserted it, how can I do a check that if 27 is already available in the section (so the last iteration), remove it from the section? Basically removing all the data with the same id and keep just the one at the top.
Not very inspired at the moment but with the amount of info you game us i made this example with jquery. It can be done also just with plain javaScript if needed
$('div').each(function() {
dataId = $(this).data('id');
otherDataId = $(this).siblings().data('id');
if (otherDataId === dataId) {
$(this).hide()
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
<div data-id="27">27</div>
<div data-id="39">1</div>
<div data-id="31">2</div>
<div data-id="57">3</div>
<div data-id="10">4</div>
<div data-id="27">27</div>
<div data-id="5">5</div>
<div data-id="89">6</div>
</section>
You could also try creating a function to remove the element with the specific data-id value you want like this:
const removeItems = (number) => {
let elements = document.querySelectorAll(`div[data-id="${number}"]`);
elements.forEach((e) => { e.remove() });
};
And then to remove elements with data-id=27 you can do: removeItems(27);.
Take a look:
const removeItems = (number) => {
let elements = document.querySelectorAll(`div[data-id="${number}"]`);
elements.forEach((e) => { e.remove() });
};
removeItems(27);
<section>
<div data-id="27">27</div>
<div data-id="39">39</div>
<div data-id="31">31</div>
<div data-id="57">57</div>
<div data-id="10">10</div>
<div data-id="27">27</div>
<div data-id="5">5</div>
<div data-id="89">89</div>
</section>
document.querySelector(`[data-id=${myDataId}]`).remove();
I have a list of elements which have alternating classes. The occurrences of the classes are random and can occur once or many times in a row.
I am looking a way to select every first occurrence of an element (marked with a -). Preferably, I'd like to do this in CSS but I can work with a JavaScript solution as well.
<div class="type-1"></div> -
<div class="type-1"></div>
<div class="type-1"></div>
<div class="type-2"></div> -
<div class="type-1"></div> -
<div class="type-1"></div>
<div class="type-2"></div> -
<div class="type-2"></div>
<div class="type-1"></div> -
...
Just like this: https://jsfiddle.net/aq8nw21f/
This code uses the CSS adjacent sibling selector, as well as :first-of-type to get the edge case of the first item in the list.
#container > div:first-of-type, .type-1 + .type-2, .type-2 + .type-1 {
color: red;
}
<div id="container">
<span>If you used :first-child, the div below this would not highlight.</span>
<div class="type-1">Yes</div>
<div class="type-1">No</div>
<div class="type-1">No</div>
<div class="type-2">Yes</div>
<div class="type-1">Yes</div>
<div class="type-1">No</div>
<div class="type-2">Yes</div>
<div class="type-2">No</div>
<div class="type-1">Yes</div>
</div>
And a less spectacular JS solution than the CSS one of TW80000:
var els = Array.from(document.querySelectorAll('div[class^="type-"]'));
console.log(els.filter(function(el, index) {
return index === 0 || !el.classList.contains(els[index - 1].classList.item(0));
}));
<div class="type-1">1</div>
<div class="type-1">2</div>
<div class="type-1">3</div>
<div class="type-2">4</div>
<div class="type-1">5</div>
<div class="type-1">6</div>
<div class="type-2">7</div>
<div class="type-2">8</div>
<div class="type-1">9</div>
I am making bunch of elements that look like the same
I have
<div id="e1" class="e1">
<div class=box>
<div class='b1'></div>
<div class='b2'></div>
<div class='b3'></div>
<div class='b4'></div>
</div>
<div class='e11'></div>
<div class='e12'></div>
<div class='e13'></div>
<div class='e14'></div>
<div class='e15'></div>
...more elements
<div>
<div id="e2" class="e2">
<div class=box>
<div class='b1'></div>
<div class='b2'></div>
<div class='b3'></div>
<div class='b4'></div>
</div>
<div class='e11'></div>
<div class='e12'></div>
<div class='e13'></div>
<div class='e14'></div>
<div class='e15'></div>
...more elements
<div>
They are almost the same and I have several e3 and e4 div...
MY question is if there are anyways to reduce the codes and create them in js with an object (or better approach).
Would anyone gives me a hint? Thanks a lot!
jsFiddle Demo
You are going to need to get some iteration parameters, and then make a function which iterates based on those parameters to create these html elements. The primary way do create an html element is
document.createElement("tagname");
and then you are going to need to append them in the order you wish. Once they are done, you can append them to an element on the screen. Avoid appending inside of a loop. Even if you create a lot of elements, they will render quickly if they are only appended onto the screen once instead of each time an element is created.
Here is a simple example:
<div id="contentZone"></div>
<script>
var c = document.getElementById("contentZone");
var content = document.createElement("div");
for( var i = 0; i < 3; i++ ){
var d = document.createElement("div");
d.innerHTML = i + ") Hello :D";
content.appendChild(d);
}
c.appendChild(content);
</script>