Make content scroll behind sticky header - javascript

I have a scroll area in which there are different headings which I want to be sticky, have a look at this fiddle.
.item{
height: 60px;
width: 100%;
background-color:red;
margin:3px 0;
}
.heading{
position:sticky;
top:0;
height:40px;
}
<div style="overflow-y:auto;height:300px;">
<h3 class="heading">Heading 1</h3>
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<h3 class="heading">Heading 2</h3>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
<h3 class="heading">Heading 3</h3>
<div class="item">Item 7</div>
<div class="item">Item 8</div>
<div class="item">Item 9</div>
<h3 class="heading">Heading 4</h3>
<div class="item">Item 19</div>
<div class="item">Item 11</div>
<div class="item">Item 12</div>
</div>
As you can see every item is visible behind the headings. As in the fiddle, in my real application these heading elements are also transparent. So I need a way to make the items overflow right under each heading.


Place background:inherit to heading and every wrapping element up to the element which has the image as backgrund. Plunkr Credits

Related

How to select every first items of multiple blocks (html, javascript)

I'm trying to select every first item of a serie of multiple blocks but I can't figure out how to do this :(
Here is an exemple of what I've tried :
let everyItems = Array.from(document.querySelectorAll('.block .item'));
let firstItems = Array.from(everyItems[0]);
document.getElementById('every1stItem').innerText = firstItems.innerText;
<div calss="block"><b>First block</b>
<div class="item">Item 1.1</div>
<div class="item">Item 1.2</div>
<div class="item">Item 1.3</div>
<div class="item">Item 1.4</div>
</div>
<div calss="block"><b>Second block</b>
<div class="item">Item 2.1</div>
<div class="item">Item 2.2</div>
<div class="item">Item 2.3</div>
<div class="item">Item 2.4</div>
</div>
<div calss="block"><b>Third block</b>
<div class="item">Item 3.1</div>
<div class="item">Item 3.2</div>
<sdivan class="item">Item 3.3</div>
<div class="item">Item 3.4</div>
</div>
<div>
<b>The first item of every block is :</b>
<div id="every1stItem"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Thank you for helping me out !

You can do something like this
let everyItems = Array.from(document.querySelectorAll('.block'));
let firstItems = everyItems.map(i => i.children[1].innerText).join(', ')
document.getElementById('every1stItem').innerText = firstItems;
<div class="block"><b>First block</b>
<div class="item">Item 1.1</div>
<div class="item">Item 1.2</div>
<div class="item">Item 1.3</div>
<div class="item">Item 1.4</div>
</div>
<div class="block"><b>Second block</b>
<div class="item">Item 2.1</div>
<div class="item">Item 2.2</div>
<div class="item">Item 2.3</div>
<div class="item">Item 2.4</div>
</div>
<div class="block"><b>Third block</b>
<div class="item">Item 3.1</div>
<div class="item">Item 3.2</div>
<div class="item">Item 3.3</div>
<div class="item">Item 3.4</div>
</div>
<div>
<b>The first item of every block is :</b>
<div id="every1stItem"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

using :nth-child(n) selector
let everyItems = $('.item:nth-child(2)');
$('#every1stItem').html(everyItems)
<div>
<b>The first item of every block is :</b>
<div id="every1stItem"></div>
</div>
<hr>
<div class="block"><b>First block</b>
<div class="item">Item 1.1</div>
<div class="item">Item 1.2</div>
<div class="item">Item 1.3</div>
<div class="item">Item 1.4</div>
</div>
<div class="block"><b>Second block</b>
<div class="item">Item 2.1</div>
<div class="item">Item 2.2</div>
<div class="item">Item 2.3</div>
<div class="item">Item 2.4</div>
</div>
<div class="block"><b>Third block</b>
<div class="item">Item 3.1</div>
<div class="item">Item 3.2</div>
<div class="item">Item 3.3</div>
<div class="item">Item 3.4</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

document.queryselector(".className") returns the first element with the class className

How to target a part of CSS class name?

Example 1 works:
HTML:
<div class="items">
<div class="item">item 1</div>
<div class="prefix-item-suffix">item 2</div>
<div class="item">item 3</div>
</div>
CSS:
div[class^="prefix"][class$="suffix"] {
color: red;
}
Example 2 doesn't:
HTML:
<div class="items">
<div class="item">item 1</div>
<div class="multiple prefix-item-suffix classes">item 2</div>
<div class="item">item 3</div>
</div>
CSS:
div[class^="prefix"][class$="suffix"] {
color: red;
}
Example 2 has multiple classes so CSS approach stops working. In real time project the multiple classes will be random except the one targeted in between them, the value between prefix-the_dynamic_value-suffix will also be random, how to target that with other classes inside same element? Because example 1 approach doesn't work.

Try [class*=…]
div[class*="prefix-"][class*="-suffix"] {
color: red;
}
<div class="items">
<div class="item">item 1</div>
<div class="multiple prefix-item-suffix classes">item 2</div>
<div class="item">item 3</div>
</div>

You could do this with js by checking if some class on the element starts with prefix and ends with suffix. If the check returns true then you run your code.
document.querySelectorAll('.items > div').forEach(el => {
const check = [...el.classList].some(cls => {
return cls.startsWith('prefix') && cls.endsWith('suffix')
})
if (check) {
el.style.color = 'red'
}
})
<div class="items">
<div class="item">item 1</div>
<div class="multiple prefix-item-suffix classes">item 2</div>
<div class="item prefix-item-suffix-not-this">item 3</div>
</div>

open and close menus

I have 4 menus and with this piece of code, i can show menus and hide them with specific btns .my question is how can i when i open a menu and i don't close it and then I open another one close previous menus? i tried to store the open menu in a variable and check it when i open another one but it didn't work.
<body>
<div class="container"> ‌
<div class="menu">
<button class="btn">open</button>
<div class="items">
<div class="items-container">
<div class="item">item 1</div>
<div class="item">item 2</div>
<div class="item">item 3</div>
<div class="item">item 4</div>
<div class="item">item 6</div>
</div>
</div>
</div>
<div class="container"> ‌
<div class="menu">
<button class="btn">open</button>
<div class="items">
<div class="items-container">
<div class="item">item 1</div>
<div class="item">item 2</div>
<div class="item">item 3</div>
<div class="item">item 4</div>
<div class="item">item 6</div>
</div>
</div>
</div>
<div class="container"> ‌
<div class="menu">
<button class="btn">open</button>
<div class="items">
<div class="items-container">
<div class="item">item 1</div>
<div class="item">item 2</div>
<div class="item">item 3</div>
<div class="item">item 4</div>
<div class="item">item 6</div>
</div>
</div>
</div>
<div class="container"> ‌
<div class="menu">
<button class="btn">open</button>
<div class="items">
<div class="items-container">
<div class="item">item 1</div>
<div class="item">item 2</div>
<div class="item">item 3</div>
<div class="item">item 4</div>
<div class="item">item 6</div>
</div>
</div>
</div>
</div>
</body>
const btns = document.querySelectorAll(".btn");
btns.forEach(btn => {
const menu = btn.parentElement;
const items = menu.querySelector(".items");
const itemsContainer = items.querySelector(".items-container");
const itemsContainerHeight = itemsContainer.getBoundingClientRect().height;
let previousActivebtn = "";
btn.addEventListener("click", (e) => {
// change btn text
if (e.currentTarget.innerHTML == "open") {
e.currentTarget.innerHTML = "close";
} else {
e.currentTarget.innerHTML = "open";
}
//show and hid the menus
if (!items.classList.contains("item-active")) {
items.classList.add("item-active");
items.style.height = itemsContainerHeight + 32 + "px";
} else {
items.classList.remove("item-active");
items.removeAttribute("style");
}
});
});

You overcomplicate it. You could create a CSS rule which would ensure that .items is hidden, unless .menu is opened:
.menu .items:not(.open) {
display: none
}
And you could create a function like this:
function open(item) {
if (!item.classList.contains("open")) {
//Hide whatever was opened
for (let it of document.querySelectorAll(.menu .items.open)) {
it.classList.remove("open")
}
item.classList.add("open");
} else {
item.classList.remove("open");
}
}
Just pass to this function the item having the class of items.

Multiple Auto-scrolling list of items

This is what I have right now
$(document).ready(function () {
var waitingTimeBottom = 2500;
var waitingTimeTop = 5000;
var animFactor = 20;
autoScroll('.qbox1');
autoScroll('.qbox2');
autoScroll('.qbox3');
autoScroll('.qbox4');
function autoScroll(qbx){
$q = $(qbx);
$m = $(qbx + ' .marq');
var mh = $m.height();
var qh = $q.height();
var xpx = mh - qh;
var animationTime = xpx * animFactor;
function scroll() {
$m.animate({'top': -xpx + "px"}, animationTime, "linear", function () {
$m.delay(waitingTimeBottom).animate({'top': '0px'}, animationTime, "linear", function () {
setTimeout(function () {
scroll();
}, waitingTimeTop);
});
});
}
if (mh > qh) {
scroll();
} else {
console.log("too few items");
}
}
});
.qbox1, .qbox2, .qbox3, .qbox4 {
height: 60vh;
width: auto;
box-sizing: border-box;
overflow: hidden;
float:left;
margin-left: 2px;
}
.marq {
position: relative;
box-sizing: border-box;
}
.item {
color: #39739d;
background-color: #E1ECF4;
border-color: #96bdd9;
box-shadow: inset 0 1px 0 #f4f8fb;
box-sizing: border-box;
padding: 5px;
margin-bottom: 1px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="qbox1">
<div class="marq">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
<div class="item">Item 7</div>
<div class="item">Item 8</div>
<div class="item">Item 9</div>
<div class="item">Item 10</div>
<div class="item">Item 11</div>
<div class="item">Item 12</div>
<div class="item">Item 13</div>
<div class="item">Item 14</div>
<div class="item">Item 15</div>
</div>
</div>
<div class="qbox2">
<div class="marq">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
<div class="item">Item 7</div>
<div class="item">Item 8</div>
<div class="item">Item 9</div>
<div class="item">Item 10</div>
<div class="item">Item 11</div>
<div class="item">Item 12</div>
<div class="item">Item 13</div>
<div class="item">Item 14</div>
<div class="item">Item 15</div>
</div>
</div>
<div class="qbox3">
<div class="marq">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
<div class="item">Item 7</div>
<div class="item">Item 8</div>
<div class="item">Item 9</div>
<div class="item">Item 10</div>
<div class="item">Item 11</div>
<div class="item">Item 12</div>
<div class="item">Item 13</div>
<div class="item">Item 14</div>
<div class="item">Item 15</div>
</div>
</div>
<div class="qbox4">
<div class="marq">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
<div class="item">Item 7</div>
<div class="item">Item 8</div>
<div class="item">Item 9</div>
<div class="item">Item 10</div>
<div class="item">Item 11</div>
<div class="item">Item 12</div>
<div class="item">Item 13</div>
<div class="item">Item 14</div>
<div class="item">Item 15</div>
</div>
</div>
Out of four, a single qbox is supposed to work like
$(document).ready(function() {
var waitingTimeBottom = 2500;
var waitingTimeTop = 5000;
var animFactor = 20;
autoScroll('.qbox1');
function autoScroll(qbx) {
$q = $(qbx);
$m = $(qbx + ' .marq');
var mh = $m.height();
var qh = $q.height();
var xpx = mh - qh;
var animationTime = xpx * animFactor;
function scroll() {
$m.animate({
'top': -xpx + "px"
}, animationTime, "linear", function() {
$m.delay(waitingTimeBottom).animate({
'top': '0px'
}, animationTime, "linear", function() {
setTimeout(function() {
scroll();
}, waitingTimeTop);
});
});
}
if (mh > qh) {
scroll();
} else {
console.log("too few items");
}
}
});
.qbox1,
.qbox2,
.qbox3,
.qbox4 {
height: 60vh;
width: auto;
box-sizing: border-box;
overflow: hidden;
float: left;
margin-left: 2px;
}
.marq {
position: relative;
box-sizing: border-box;
}
.item {
color: #39739d;
background-color: #E1ECF4;
border-color: #96bdd9;
box-shadow: inset 0 1px 0 #f4f8fb;
box-sizing: border-box;
padding: 5px;
margin-bottom: 1px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="qbox1">
<div class="marq">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
<div class="item">Item 7</div>
<div class="item">Item 8</div>
<div class="item">Item 9</div>
<div class="item">Item 10</div>
<div class="item">Item 11</div>
<div class="item">Item 12</div>
<div class="item">Item 13</div>
<div class="item">Item 14</div>
<div class="item">Item 15</div>
</div>
</div>
Why there is a conflict when multiple qbox are inserted?

Try this...
Change
$q = $(qbx); $m = $(qbx + ' .marq'); to var $q = $(qbx); var $m = $(qbx + ' .marq');
$(document).ready(function () {
var waitingTimeBottom = 2500;
var waitingTimeTop = 5000;
var animFactor = 20;
autoScroll('.qbox1');
autoScroll('.qbox2');
autoScroll('.qbox3');
autoScroll('.qbox4');
function autoScroll(qbx){
var $q = $(qbx);
var $m = $(qbx + ' .marq');
var mh = $m.height();
var qh = $q.height();
var xpx = mh - qh;
var animationTime = xpx * animFactor;
function scroll() {
$m.animate({'top': -xpx + "px"}, animationTime, "linear", function () {
$m.delay(waitingTimeBottom).animate({'top': '0px'}, animationTime, "linear", function () {
setTimeout(function () {
scroll();
}, waitingTimeTop);
});
});
}
if (mh > qh) {
scroll();
} else {
console.log("too few items");
}
}
});
.qbox1, .qbox2, .qbox3, .qbox4 {
height: 60vh;
width: auto;
box-sizing: border-box;
overflow: hidden;
float:left;
margin-left: 2px;
}
.marq {
position: relative;
box-sizing: border-box;
}
.item {
color: #39739d;
background-color: #E1ECF4;
border-color: #96bdd9;
box-shadow: inset 0 1px 0 #f4f8fb;
box-sizing: border-box;
padding: 5px;
margin-bottom: 1px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="qbox1">
<div class="marq">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
<div class="item">Item 7</div>
<div class="item">Item 8</div>
<div class="item">Item 9</div>
<div class="item">Item 10</div>
<div class="item">Item 11</div>
<div class="item">Item 12</div>
<div class="item">Item 13</div>
<div class="item">Item 14</div>
<div class="item">Item 15</div>
</div>
</div>
<div class="qbox2">
<div class="marq">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
<div class="item">Item 7</div>
<div class="item">Item 8</div>
<div class="item">Item 9</div>
<div class="item">Item 10</div>
<div class="item">Item 11</div>
<div class="item">Item 12</div>
<div class="item">Item 13</div>
<div class="item">Item 14</div>
<div class="item">Item 15</div>
</div>
</div>
<div class="qbox3">
<div class="marq">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
<div class="item">Item 7</div>
<div class="item">Item 8</div>
<div class="item">Item 9</div>
<div class="item">Item 10</div>
<div class="item">Item 11</div>
<div class="item">Item 12</div>
<div class="item">Item 13</div>
<div class="item">Item 14</div>
<div class="item">Item 15</div>
</div>
</div>
<div class="qbox4">
<div class="marq">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
<div class="item">Item 7</div>
<div class="item">Item 8</div>
<div class="item">Item 9</div>
<div class="item">Item 10</div>
<div class="item">Item 11</div>
<div class="item">Item 12</div>
<div class="item">Item 13</div>
<div class="item">Item 14</div>
<div class="item">Item 15</div>
</div>
</div>

jQuery alternative to nth-child selector that supports classes

I have a structure like this:
<div class="parent">
<div class="randomclass">...</div>
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="randomclassdifferentname">...</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
<div class="item">Item 7</div>
...
</div>
<div class="parent">
<div class="anotherclass">...</div>
<div class="item">Another item 1</div>
<div class="item">Another item 2</div>
<div>...</div>
<div class="item">Another item 3</div>
...
</div>
I need to select only nth .item div class child of a .parent div (counter resets for every parent node).
For example I want to select every third "div.item" element so I'm expecting to affect elements with content "Item 3", "Item 6", "Another item 3".
Rules:
Desired classes are always applied to a "div" element (maybe not important).
Parents have always "parent" class and are also always "div" elements.
Amongst divs there can be other divs (or any other type of element) with random class name (or without) and these must not interfere with the nth counter.
Elements also can be nested so every item class element can in addition contain another parent class element and that again another item class elements.
Unfortunatelly CSS selector:
div.parent div.item:nth-child(3n)
with nth-child() is not working properly. Although the effects are applied only to elements with given class, the counting itself is not correct because it counts also elements without given class.
As I doubt that there will be pure CSS solution and also because I'm in fact using this as a jQuery selector, I would like some simple jQuery alternative. Thank you guys for any help you can give me.

You can filter the items based on the index they have in the parent, in relation to other items with the same class
$('.item').filter(function(_,item) {
return ($(item).siblings('.item').addBack().index(item)+1) % 3 === 0;
}).css('color','red');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
<div class="randomclass">...</div>
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="randomclassdifferentname">...</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
<div class="item">Item 7</div>
...
</div>
<div class="parent">
<div class="anotherclass">...</div>
<div class="item">Another item 1</div>
<div class="item">Another item 2</div>
<div>...</div>
<div class="item">Another item 3</div>
...
</div>

If you want nth element of some jQuery collection you need to use the .eq() selector on that collection. As in...
var allItems = $('.parent').find('.item');
for (i = 1; i <= allItems.length/3; i++) {
allItems.eq((i*3)-1).css({'border':'1px solid red'})
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
<div class="randomclass">...</div>
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="randomclassdifferentname">...</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
<div class="item">Item 7</div>
...
</div>
<div class="parent">
<div class="anotherclass">...</div>
<div class="item">Another item 1</div>
<div class="item">Another item 2</div>
<div>...</div>
<div class="item">Another item 3</div>
...
</div>
The above will keep your count throughout the collection (irrespective of parents). If you want each parent dealt with separately, use an .each() on $('.parent')s. As in...
$('.parent').each( function(){
var theseItems = $(this).find('.item');
for (i = 1; i <= theseItems.length/3; i++) {
theseItems.eq((i*3)-1).css({border:'1px solid red'})
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
<div class="randomclass">...</div>
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="randomclassdifferentname">...</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
<div class="item">Item 7</div>
...
</div>
<div class="parent">
<div class="anotherclass">...</div>
<div class="item">Another item 1</div>
<div class="item">Another item 2</div>
<div>...</div>
<div class="item">Another item 3</div>
...
</div>

As I doubt that there will be pure CSS solution
For a pure css solution you can utilize General siblings combinator selector ~.
The elements represented by the two sequences share the same parent in
the document tree and the element represented by the first sequence
precedes (not necessarily immediately) the element represented by the
second one.
Use two selectors. At first selector, match required element. At second selector match elements following first selector, set default value for properties set at first matched element or use unset.
/* match third `div.item` */
.parent div.item ~ div.item ~ div.item {
color: sienna;
font-size: 2em;
}
/* match fourth through last `div.item` */
.parent div.item ~ div.item ~ div.item ~ div.item {
color: unset;
font-size: unset;
}
<div class="parent">
<div class="randomclass">...</div>
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="randomclassdifferentname">...</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
<div class="item">Item 7</div>
...
</div>
<div class="parent">
<div class="anotherclass">...</div>
<div class="item">Another item 1</div>
<div class="item">Another item 2</div>
<div>...</div>
<div class="item">Another item 3</div>
<div class="item">Another item 4</div>
<div class="item">Another item 5</div>
...
</div>
I need to select only nth .item div class child of a .parent div
(counter resets for every parent node).
For example I want to select every third "div.item" element so I'm
expecting to affect elements with content "Item 3", "Item 6",
"Another item 3".
Did not initially notice that requirement was to select every third element.
You can still utilize css General sibling combinator selector with .querySelector(), which returns a single element, within a javascript function to return expected result.
The function currently accepts a parent element as selector string or DOM element, descendant element selector, number referencing the distance between selections of descendant selector, a callback to call for each matched element, returns matched elements within an array.
for loop within for..of loop iterates a maximum of childSelector.length / nth times. A selector string is constructed using the nth number parameter within the for loop; .querySelector() returns the single element, then increments the nth parameter which creates selector matching nth element from previous matched element for next iteration; eliminating the necessity for for loop to iterate all childSelector.length elements of parentSelector to match the required selectors.
const gen = function* (arg) {
yield* arg[Symbol.iterator] ? arg : [arg]
};
window.onload = function() {
// `parentSelector`: `".parent"`, `document.querySelector(".parent")`,
// `document.querySelectorAll(".parent"),
// `document.getElementsByClassName(".parent")`
// `childSelector`: `".item"`; `nth`: `3`; `callback`: function
function nthElement(parentSelector, childSelector, nth, callback) {
let [nthparents, selector, n, items] = [
typeof parentSelector === "string"
? document.querySelectorAll(parentSelector)
: [...gen(parentSelector)]
, childSelector
, nth
, []
];
for (let nthp of nthparents) {
for (let i = n; i <= nthp.querySelectorAll(selector).length; i += n) {
let item = nthp.querySelector(Array(i).fill(selector).join("~"));
items.push(item);
callback.call(item, i, item, nthp)
}
};
return items
}
// select every `nth` third `.item` element
// that is a child of `.parent` element
let items = nthElement(document.querySelectorAll(".parent"), ".item", 3
, function (i, nth, nthParent) {
console.log(i, nth, nthParent);
this.style.color = "sienna";
this.style.fontSize = "2em";
});
console.log(items);
}
<div class="parent">
<div class="randomclass">...</div>
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="randomclassdifferentname">...</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
<div class="item">Item 7</div>
...
<div class="randomclass">...</div>
<div class="randomclass">...</div>
<div class="randomclass">...</div>
<div class="item">Item 8</div>
</div>
<div class="parent">
<div class="anotherclass">...</div>
<div class="item">Another item 1</div>
<div class="item">Another item 2</div>
<div>...</div>
<div class="item">Another item 3</div>
<div class="anotherclass">...</div>
<div class="item">Another item 4</div>
<div class="item">Another item 5</div>
...
<div class="anotherclass">...</div>
<div class="anotherclass">...</div>
<div class="anotherclass">...</div>
<div class="item">Another item 6</div>
</div>
Using jQuery
$(function() {
function nthElement(childSelector, nth, callback) {
let [nthparents, selector, n, items] = [
Array.from(this)
, childSelector
, nth
, []
];
for (let nthp of nthparents) {
for (let i = n; i <= nthp.querySelectorAll(selector).length; i += n) {
let item = nthp.querySelector(Array(i).fill(selector).join("~"));
items.push(item);
callback.call(item, i, item, nthp)
}
};
return jQuery(items)
}
// set `nthElement` as a jQuery method
$.fn.extend({nthElement: nthElement});
// select every third `.item` element that is a child of `.parent` element
var items = $(".parent").nthElement(".item", 3, function(i, nth, nthParent) {
console.log(i, nth, nthParent);
$(this).css({color: "sienna",fontSize: "2em"});
});
console.log(items);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<div class="parent">
<div class="randomclass">...</div>
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="randomclassdifferentname">...</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
<div class="item">Item 7</div>
...
<div class="randomclass">...</div>
<div class="randomclass">...</div>
<div class="randomclass">...</div>
<div class="item">Item 8</div>
</div>
<div class="parent">
<div class="anotherclass">...</div>
<div class="item">Another item 1</div>
<div class="item">Another item 2</div>
<div>...</div>
<div class="item">Another item 3</div>
<div class="anotherclass">...</div>
<div class="item">Another item 4</div>
<div class="item">Another item 5</div>
...
<div class="anotherclass">...</div>
<div class="anotherclass">...</div>
<div class="anotherclass">...</div>
<div class="item">Another item 6</div>
</div>

nth-child selector is not class sensitive. It selects element by name not by class. See jquery nth-child
The :nth-child(n) pseudo-class is easily confused with :eq(n), even though the two can result in dramatically different matched elements. With :nth-child(n), all children are counted, regardless of what they are, and the specified element is selected only if it matches the selector attached to the pseudo-class. With :eq(n) only the selector attached to the pseudo-class is counted, not limited to children of any other element, and the (n+1)th one (n is 0-based) is selected.
Though eq(n) is class sensitive but it not supports equation as parameter.
So I think there's no direct way to use css only to implement it.
Try it also with some js codes.

This isn't possible with pure CSS selectors. However, this is something achievable if you have the flexibility to use a unique tag name instead of div.item. Here is something you could do, if you could change the div.item elements to a p tag.
.parent p:nth-of-type(3n) {
color: red;
}
.parent {
padding: 10px;
border: 1px solid black;
}
.item {
border: 1px dotted black;
}
<div class="parent">
<div class="randomclass">Random</div>
<p class="item">Item 1</p>
<p class="item">Item 2</p>
<p class="item">Item 3</p>
<div class="randomclassdifferentname">Random different Name</div>
<p class="item">Item 4</p>
<p class="item">Item 5</p>
<p class="item">Item 6</p>
<p class="item">Item 7</p>
</div>
<div class="parent">
<div class="anotherclass">Another Random</div>
<p class="item">Another item 1</p>
<p class="item">Another item 2</p>
<div>Random Text</div>
<p class="item">Another item 3</p>
</div>

Categories

Resources