Develop Reference

Find Text Value of closest first p using javascript

I have multiple columns like this
<div class="col-md-6 mt-3 mt-md-0">
<div class="blog_content d-flex bg-dark text-white flex-column bg-black h-100 text-center pt-3 pb-3 px-3 mx-3">
<h5 class="mb-0 border-0">નુતન વર્ષ 2023 ની શરૂઆત </h5>
<div class="d-flex flex-grow-1 justify-content-center align-items-center mb-0 h-100">
<div class="flip-card h-100">
<div class="flip-card-inner h-100">
<div class="flip-card-front d-flex justify-content-center align-items-center">
<p class="">નુતન વર્ષ 2023 ની<br> શરૂઆત કંઈક એવી થાય,<br> તમારા જીવનમાં ખુશીઓ ફેલાય,<br> આનંદ મંગલથી દરેક દિવસ<br> પસાર થાય એવી હાર્દિક<br> શુભકામનાઓ !!</p>
</div>
<div class="flip-card-back d-flex justify-content-center align-items-center">
<p class="">nutan varsh 2023 ni<br> sharuat kaik evi thay,<br> tamar jivanam khushio felay,<br> anand mangalathi darek divas<br> pasar thay evi hardik<br> shubhakamanao !!</p>
</div>
</div>
</div>
</div>
<div class="time d-flex justify-content-between align-items-center align-items-end mt-auto pt-3">
<div class="left text-start">
<h6 class="mb-0"><a class="link-bold" href="https://stag.example.com/gu/festival/happy-new-year-2023">નવા વરસની શુભકામનાઓ</a></h6>
<p class="mb-0"><small>1 day ago</small></p>
</div>
<div class="right">
<span class="copy"><img src="https://stag.example.com/assets/images/copy.png" class="mx-1 social" alt="share quote" width="24" height="24"></span>
<img src="https://stag.example.com/assets/images/share.png" class="mx-1 social" alt="share quote" width="24" height="24">
</div>
</div>
</div>
</div>
What I am looking for is get value of nearest p text inside flip-card-front class when I click copy class image icon. I am new in javascript and does not getting idea how I can do it.
var copy = document.getElementsByClassName('copy');
for (var i = 0; i < copy.length; i++) {
copy[i].addEventListener('click', function() {
//get text નુતન વર્ષ 2023 ની<br> શરૂઆત કંઈક એવી થાય,<br> તમારા જીવનમાં ખુશીઓ ફેલાય,<br> આનંદ મંગલથી દરેક દિવસ<br> પસાર થાય એવી હાર્દિક<br> શુભકામનાઓ !!
console.log("p tag value which is inside flip-card-front");
});
}
I am trying from last hour but have not found any working solution for achieve my goal. Let me know if someone here can help me for same. Thanks!

regarding your structure
you search closest blog_content, from there search flip-card-front p:
copy[i].addEventListener('click', evt => {
const el = evt.target.closest('.blog_content');
const mySearchedText = el.querySelector('.flip-card-front p).innerHTML;
});
not tested but should be ok

You you need to do:
Navigate to the necessary node.
For this, you will have to go to common parent in the DOM tree. You can use .closest to do that.
Once you have parent, you can lookup any necessary element from it
var copy = document.getElementsByClassName('copy');
for (var i = 0; i < copy.length; i++) {
copy[i].addEventListener('click', function() {
const content = this.closest('.blog_content')
const cardFront = content.querySelector('.flip-card-front p')
const text = cardFront.textContent;
console.log(text)
});
}
<div class="col-md-6 mt-3 mt-md-0">
<div class="blog_content d-flex bg-dark text-white flex-column bg-black h-100 text-center pt-3 pb-3 px-3 mx-3">
<h5 class="mb-0 border-0">નુતન વર્ષ 2023 ની શરૂઆત </h5>
<div class="d-flex flex-grow-1 justify-content-center align-items-center mb-0 h-100">
<div class="flip-card h-100">
<div class="flip-card-inner h-100">
<div class="flip-card-front d-flex justify-content-center align-items-center">
<p class="">નુતન વર્ષ 2023 ની<br> શરૂઆત કંઈક એવી થાય,<br> તમારા જીવનમાં ખુશીઓ ફેલાય,<br> આનંદ મંગલથી દરેક દિવસ<br> પસાર થાય એવી હાર્દિક<br> શુભકામનાઓ !!</p>
</div>
<div class="flip-card-back d-flex justify-content-center align-items-center">
<p class="">nutan varsh 2023 ni<br> sharuat kaik evi thay,<br> tamar jivanam khushio felay,<br> anand mangalathi darek divas<br> pasar thay evi hardik<br> shubhakamanao !!</p>
</div>
</div>
</div>
</div>
<div class="time d-flex justify-content-between align-items-center align-items-end mt-auto pt-3">
<div class="left text-start">
<h6 class="mb-0"><a class="link-bold" href="https://stag.example.com/gu/festival/happy-new-year-2023">નવા વરસની શુભકામનાઓ</a></h6>
<p class="mb-0"><small>1 day ago</small></p>
</div>
<div class="right">
<span class="copy"><img src="https://stag.example.com/assets/images/copy.png" class="mx-1 social" alt="share quote" width="24" height="24"></span>
<img src="https://stag.example.com/assets/images/share.png" class="mx-1 social" alt="share quote" width="24" height="24">
</div>
</div>
</div>
</div>

Changing the image output based on radio button output

Good day,
I am working on this project of mine but unfortunately I'm not skilled enough yet to fix the following problem I have been trying to solve for some time now. I have a webpage that shows the amount of calories that someone needs to consume to hit their training goals. Based on a 3 options radio input selection I want to show 3 different images on the output page based on the selection they made. This can be weight loss, maintenance or muscle gain.
The code is as following:
Code for the input of the goal:
<!-- Goal -->
<div class="row px-md-5 mrow" id="rowtwo">
<div class="col-12 py-5">
<div class="text-center">
<h2 class="text-primary">2. Wat is je doel?</h2>
</div>
</div>
<div class="col-12 col-md-12">
<ul class="row radio-group-goal d-flex flex-stretch p-0 m-0">
<li class="radio col-md-6 selected d-flex flex-stretch mb-2" data-goal="Afvallen / Lager vetpercentage" style="list-style: none;">
<div class="innerradio d-flex flex-column content shadow-sm rounded p-4 d-flex flex-row bg-white w-100 greenborder">
<h6 class="text-left"><i class="fas fa-check-circle hidebtn text-success mr-1"></i> <i class="fas fa-weight text-primary mr-2"></i> Afvallen / Lager vetpercentage</h6>
<!-- <p class="mb-0 text-left" style="font-size: 12px; line-height: 14px">minder kcal/koolhydraten</p> -->
</div>
</li>
<li class="radio col-md-6 d-flex flex-stretch mb-2" data-goal="Gezonde levensstijl" style="list-style: none;">
<div class="innerradio d-flex flex-column content shadow-sm rounded p-4 d-flex flex-row bg-white w-100">
<h6 class="text-left mb-0"><i class="fas fa-check-circle hidebtn text-success mr-1"></i> <i class="fas fa-carrot text-primary mr-2"></i> Gezonde levensstijl</h6>
<!-- <p class="mb-0 text-left" style="font-size: 12px; line-height: 14px">Gezond</p> -->
</div>
</li>
<li class="radio col-md-6 d-flex flex-stretch mb-2" data-goal="Aankomen / Meer spiermassa" style="list-style: none;">
<div class="innerradio d-flex flex-column content shadow-sm rounded p-4 d-flex flex-row bg-white w-100">
<h6 class="text-left mb-0"><i class="fas fa-check-circle hidebtn text-success mr-1"></i> <i class="fas fa-dumbbell text-primary mr-2"></i> Aankomen / Meer spiermassa</h6>
<!-- <p class="mb-0 text-left" style="font-size: 12px; line-height: 14px">muscle</p> -->
</div>
</li>
</ul>
</div>
Code for the output:
<div class="col-12 col-md-6">
<div class="row">
<div class="col-12 col-md-6 mb-4 d-flex flex-stretch">
<div class="youchoose-box px-4 py-5 d-flex align-items-center justify-content-center flex-column bg-white rounded shadow-sm w-100" style="border:1px solid white;">
<i class="fas fa-trophy text-center text-primary mb-2"></i>
<!-- <p class="mb-0 text-center">Doel</p> -->
<h5 class="text-primary text-center">
<?php echo $_POST['radio-value'];?>
</h5>
</div>
</div>
//The image I want to change based on the radio value:
<div class="container pb-5">
<div class="row">
<div class="col-12 d-flex align-items-center justify-content-center">
<div class="d-flex align-items-center justify-content-center rounded shadow-sm">
<img src="<?php echo home_url();?>/wp-content/uploads/2020/12/Macro-split.png">
</div>
</div>
</div>
</div>
<!-- save values and send to next pages -->
<input type="hidden" id="radio-value" name="radio-value" value="<?php echo $_POST['radio-value']?>" />
I hope you can guide me in the right direction as I am now on the basics of understanding Javascript.
Thank you in advance!

Assuming your value is coming through in $_POST['radio-value'] the basic way to do this would be with an if statement to check if one of the 3 values is set, and then set which image that value corrresponds to:
//The image I want to change based on the radio value:
<?php
$image = 'default.png';
if (isset($_POST['radio-value'])) {
if ($_POST['radio-value'] == 'value for image 1') {
$image = 'value1image.png';
} else if ($_POST['radio-value'] == 'value for image 2') {
$image = 'value2image.png';
} else if ($_POST['radio-value'] == 'value for image 3') {
$image = 'value3image.png';
}
}
?>
Then in your image src:
<img src="<?php echo home_url();?>/wp-content/uploads/2020/12/<?php echo $image;?>">

How to filter products using javascript?

I'm unable to make this filter work properly.
All I want is if someone clicks on a particular filter, the products underneath gets sorted accordingly.
I have used data-* attributes for filtering.
HTML:
<section id="store" class="store py-5">
<div class="container">
<!-- section title -->
<div class="row">
<div class="col-10 mx-auto col-sm-6 text-center">
<h1 class="text-capitalize">our <strong class="banner-title ">store</strong></h1>
</div>
</div>
<!-- end of section title -->
<!--filter buttons -->
<div class="row">
<div class=" col-lg-8 mx-auto d-flex justify-content-around my-2 sortBtn flex-wrap">
all
cakes
cupcakes
sweets
doughnuts
</div>
</div>
<!--end of filter buttons -->
<!-- store items-->
<div class="row" id="store-items">
<!-- single item -->
<div class="col-10 col-sm-6 col-lg-4 mx-auto my-3 store-item sweets" data-item="sweets">
<div class="card ">
<div class="img-container">
<img src="https://js-beginners.github.io/filter-project/img/sweets-1.jpeg" class="card-img-top store-img" alt="">
<span class="store-item-icon">
<i class="fas fa-shopping-cart"></i>
</span>
</div>
<div class="card-body">
<div class="card-text d-flex justify-content-between text-capitalize">
<h5 id="store-item-name">sweet item</h5>
<p class="store-item-value">$ <strong id="store-item-price" class="font-weight-bold">5</strong></p>
</div>
</div>
</div>
<!-- end of card-->
</div>
<!--end of single store item-->
<!-- single item -->
<div class="col-10 col-sm-6 col-lg-4 mx-auto my-3 store-item cupcakes" data-item="cupcakes">
<div class="card ">
<div class="img-container">
<img src="https://js-beginners.github.io/filter-project/img/cupcake-1.jpeg" class="card-img-top store-img" alt="">
<span class="store-item-icon">
<i class="fas fa-shopping-cart"></i>
</span>
</div>
<div class="card-body">
<div class="card-text d-flex justify-content-between text-capitalize">
<h5 id="store-item-name">cupcake item</h5>
<p class="store-item-value">$ <strong id="store-item-price" class="font-weight-bold">5</strong></p>
</div>
</div>
</div>
<!-- end of card-->
</div>
<!--end of single store item-->
<!-- single item -->
<div class="col-10 col-sm-6 col-lg-4 mx-auto my-3 store-item cakes" data-item="cakes">
<div class="card ">
<div class="img-container">
<img src="https://js-beginners.github.io/filter-project/img/cake-1.jpeg" class="card-img-top store-img" alt="">
<span class="store-item-icon">
<i class="fas fa-shopping-cart"></i>
</span>
</div>
<div class="card-body">
<div class="card-text d-flex justify-content-between text-capitalize">
<h5 id="store-item-name">cake item</h5>
<p class="store-item-value">$ <strong id="store-item-price" class="font-weight-bold">5</strong></p>
</div>
</div>
</div>
<!-- end of card-->
</div>
<!--end of single store item-->
<!-- single item -->
<div class="col-10 col-sm-6 col-lg-4 mx-auto my-3 store-item doughnuts" data-item="dougnuts">
<div class="card ">
<div class="img-container">
<img src="https://js-beginners.github.io/filter-project/img/doughnut-1.jpeg" class="card-img-top store-img" alt="">
<span class="store-item-icon">
<i class="fas fa-shopping-cart"></i>
</span>
</div>
<div class="card-body">
<div class="card-text d-flex justify-content-between text-capitalize">
<h5 id="store-item-name">dougnut item</h5>
<p class="store-item-value">$ <strong id="store-item-price" class="font-weight-bold">5</strong></p>
</div>
</div>
</div>
<!-- end of card-->
</div>
<!--end of single store item-->
<!-- single item -->
<div class="col-10 col-sm-6 col-lg-4 mx-auto my-3 store-item sweets" data-item="sweets">
<div class="card ">
<div class="img-container">
<img src="https://js-beginners.github.io/filter-project/img/sweets-2.jpeg" class="card-img-top store-img" alt="">
<span class="store-item-icon">
<i class="fas fa-shopping-cart"></i>
</span>
</div>
<div class="card-body">
<div class="card-text d-flex justify-content-between text-capitalize">
<h5 id="store-item-name">sweet item</h5>
<p class="store-item-value">$ <strong id="store-item-price" class="font-weight-bold">10</strong></p>
</div>
</div>
</div>
<!-- end of card-->
</div>
<!--end of single store item-->
<!-- single item -->
<div class="col-10 col-sm-6 col-lg-4 mx-auto my-3 store-item cupcakes" data-item="cupcakes">
<div class="card ">
<div class="img-container">
<img src="https://js-beginners.github.io/filter-project/img/cupcake-2.jpeg" class="card-img-top store-img" alt="">
<span class="store-item-icon">
<i class="fas fa-shopping-cart"></i>
</span>
</div>
<div class="card-body">
<div class="card-text d-flex justify-content-between text-capitalize">
<h5 id="store-item-name">cupcake item</h5>
<p class="store-item-value">$ <strong id="store-item-price" class="font-weight-bold">10</strong></p>
</div>
</div>
</div>
<!-- end of card-->
</div>
<!--end of single store item-->
<!-- single item -->
<div class="col-10 col-sm-6 col-lg-4 mx-auto my-3 store-item cakes" data-item="cakes">
<div class="card ">
<div class="img-container">
<img src="https://js-beginners.github.io/filter-project/img/cake-2.jpeg" class="card-img-top store-img" alt="">
<span class="store-item-icon">
<i class="fas fa-shopping-cart"></i>
</span>
</div>
<div class="card-body">
<div class="card-text d-flex justify-content-between text-capitalize">
<h5 id="store-item-name">cake item</h5>
<p class="store-item-value">$ <strong id="store-item-price" class="font-weight-bold">10</strong></p>
</div>
</div>
</div>
<!-- end of card-->
</div>
<!--end of single store item-->
<!-- single item -->
<div class="col-10 col-sm-6 col-lg-4 mx-auto my-3 store-item doughnuts" data-item="dougnuts">
<div class="card ">
<div class="img-container">
<img src="https://js-beginners.github.io/filter-project/img/doughnut-2.jpeg" class="card-img-top store-img" alt="">
<span class="store-item-icon">
<i class="fas fa-shopping-cart"></i>
</span>
</div>
<div class="card-body">
<div class="card-text d-flex justify-content-between text-capitalize">
<h5 id="store-item-name">dougnut item</h5>
<p class="store-item-value">$ <strong id="store-item-price" class="font-weight-bold">10</strong></p>
</div>
</div>
</div>
<!-- end of card-->
</div>
<!--end of single store item-->
<!-- single item -->
<div class="col-10 col-sm-6 col-lg-4 mx-auto my-3 store-item sweets" data-item="sweets">
<div class="card ">
<div class="img-container">
<img src="https://js-beginners.github.io/filter-project/img/sweets-3.jpeg" class="card-img-top store-img" alt="">
<span class="store-item-icon">
<i class="fas fa-shopping-cart"></i>
</span>
</div>
<div class="card-body">
<div class="card-text d-flex justify-content-between text-capitalize">
<h5 id="store-item-name">sweet item</h5>
<p class="store-item-value">$ <strong id="store-item-price" class="font-weight-bold">15</strong></p>
</div>
</div>
</div>
<!-- end of card-->
</div>
<!--end of single store item-->
<!-- single item -->
<div class="col-10 col-sm-6 col-lg-4 mx-auto my-3 store-item cupcakes" data-item="cupcakes">
<div class="card ">
<div class="img-container">
<img src="https://js-beginners.github.io/filter-project/img/cupcake-3.jpeg" class="card-img-top store-img" alt="">
<span class="store-item-icon">
<i class="fas fa-shopping-cart"></i>
</span>
</div>
<div class="card-body">
<div class="card-text d-flex justify-content-between text-capitalize">
<h5 id="store-item-name">cupcake item</h5>
<p class="store-item-value">$ <strong id="store-item-price" class="font-weight-bold">15</strong></p>
</div>
</div>
</div>
<!-- end of card-->
</div>
<!--end of single store item-->
<!-- single item -->
<div class="col-10 col-sm-6 col-lg-4 mx-auto my-3 store-item cakes" data-item="cakes">
<div class="card ">
<div class="img-container">
<img src="https://js-beginners.github.io/filter-project/img/cake-3.jpeg" class="card-img-top store-img" alt="">
<span class="store-item-icon">
<i class="fas fa-shopping-cart"></i>
</span>
</div>
<div class="card-body">
<div class="card-text d-flex justify-content-between text-capitalize">
<h5 id="store-item-name">cake item</h5>
<p class="store-item-value">$ <strong id="store-item-price" class="font-weight-bold">15</strong></p>
</div>
</div>
</div>
<!-- end of card-->
</div>
<!--end of single store item-->
<!-- single item -->
<div class="col-10 col-sm-6 col-lg-4 mx-auto my-3 store-item doughnuts" data-item="dougnuts">
<div class="card ">
<div class="img-container">
<img src="https://js-beginners.github.io/filter-project/img/doughnut-3.jpeg" class="card-img-top store-img" alt="">
<span class="store-item-icon">
<i class="fas fa-shopping-cart"></i>
</span>
</div>
<div class="card-body">
<div class="card-text d-flex justify-content-between text-capitalize">
<h5 id="store-item-name">dougnut item</h5>
<p class="store-item-value">$ <strong id="store-item-price" class="font-weight-bold">15</strong></p>
</div>
</div>
</div>
<!-- end of card-->
</div>
<!--end of single store item-->
</div>
</section>
JS:
const storeItems = document.querySelectorAll('.store-item');
const filterBtn = document.querySelectorAll('.filter-btn');
function filterItems(){
filterBtn.forEach(function(btn){
const filter = btn.dataset.filter;
if (filter === "all"){
console.log(filter);
storeItems.forEach(function(item){
item.style.display = "block"
})
}
else if (filter === "cakes"){
console.log(filter);
storeItems.forEach(function(item){
if (item.classList.contains('cakes')){
item.style.display = "block"
}
else {
item.style.display = "none"
}
})
}
else if (filter === "cupcakes"){
console.log(filter);
storeItems.forEach(function(item){
if (item.classList.contains('cupcakes')){
item.style.display = "block"
}
else {
item.style.display = "none"
}
})
}
else if (filter === "sweets"){
console.log(filter);
storeItems.forEach(function(item){
if (item.classList.contains('sweets')){
item.style.display = "block"
}
else {
item.style.display = "none"
}
})
}
else if (filter === "doughnuts"){
console.log(filter);
storeItems.forEach(function(item){
if (item.classList.contains('doughnuts')){
item.style.display = "block"
}
else {
item.style.display = "none"
}
})
}
})
}
What happens is on clicking on a particular filter button, only the products having class="doughnuts" gets displayed and the rest sets to display:none.
To better explain there's a demo available here: https://codepen.io/sumayya_ishaq/pen/eYdQaRy

How to dynamically append jquery function

Is it possible to append dynamically jquery function after another..
Here's what I've tried
$('div#bottomPart').children().getNext(3).children().children().find('p').eq(3).text();
function getNext(num) {
var appendNext = "";
for (var i = 0; i < num; i++) {
appendNext = appendNext + next();
}
return appendNext;
}
don't judge the code it's just to give you all an idea of my thought.
I'm trying to add next() using a for loop in the selector something like
if getNext(1) then it should return the selector like $('div#bottomPart').children().next().children().children().find('p').eq(3).text();
or if getNext(2) then it should return the selector like $('div#bottomPart').children().next().next().children().children().find('p').eq(3).text();
Here's my HTML:
<div id="bottomPart">
<div class="card d-flex flex-row mb-3 table-heading">
<div class="d-flex flex-grow-1 min-width-zero">
<div class="card-body align-self-center d-flex flex-column flex-md-row justify-content-between min-width-zero align-items-md-center" id="compareHeading">
<p class="list-item-heading mb-0 truncate width-30 w-xs-100">Parameters</p>
<p class="mb-0 text-primary w-20 w-xs-100 text-center">
<img class="card-img-top" style="width: 7rem; object-fit: contain;" src="/static/images/Go Digit General Insurance Company Ltd..jpg" alt="Go Digit General Insurance Company Ltd.">
</p>
<p class="mb-0 text-primary w-20 w-xs-100 text-center">
<img class="card-img-top" style="width: 7rem; object-fit: contain;" src="/static/images/Reliance General Insurance Company Ltd..jpg" alt="Reliance General Insurance Company Ltd.">
</p>
<p class="mb-0 text-primary w-20 w-xs-100 text-center">ENTERPRISE</p>
</div>
</div>
</div>
<div class="card d-flex flex-row mb-3">
<div class="d-flex flex-grow-1 min-width-zero">
<div class="card-body align-self-center d-flex flex-column flex-md-row justify-content-between min-width-zero align-items-md-center">
<p class="list-item-heading mb-0 truncate width-30 w-xs-100">Own Damage Cover</p>
<p class="mb-0 text-primary w-20 w-xs-100 text-center">od1</p>
<p class="mb-0 text-primary w-20 w-xs-100 text-center">od2</p>
<p class="mb-0 text-primary w-20 w-xs-100 text-center">od3</p>
</div>
</div>
</div>
<div class="card d-flex flex-row mb-3">
<div class="d-flex flex-grow-1 min-width-zero">
<div class="card-body align-self-center d-flex flex-column flex-md-row justify-content-between min-width-zero align-items-md-center">
<p class="list-item-heading mb-0 truncate width-30 w-xs-100">Team permissions</p>
<p class="mb-0 text-primary w-20 w-xs-100 text-center">tp1</p>
<p class="mb-0 text-primary w-20 w-xs-100 text-center">tp2</p>
<p class="mb-0 text-primary w-20 w-xs-100 text-center">tp3</p>
</div>
</div>
</div>
<div class="card d-flex flex-row mb-3">
<div class="d-flex flex-grow-1 min-width-zero">
<div class="card-body align-self-center d-flex flex-column flex-md-row justify-content-between min-width-zero align-items-md-center">
<p class="list-item-heading mb-0 truncate width-30 w-xs-100">24/5 Support</p>
<p class="mb-0 text-primary w-20 w-xs-100 text-center">su51</p>
<p class="mb-0 text-primary w-20 w-xs-100 text-center">su52</p>
<p class="mb-0 text-primary w-20 w-xs-100 text-center">su53</p>
</div>
</div>
</div>
<div class="card d-flex flex-row mb-3">
<div class="d-flex flex-grow-1 min-width-zero">
<div class="card-body align-self-center d-flex flex-column flex-md-row justify-content-between min-width-zero align-items-md-center">
<p class="list-item-heading mb-0 truncate width-30 w-xs-100">24/7 Support</p>
<p class="mb-0 text-primary w-20 w-xs-100 text-center">su71</p>
<p class="mb-0 text-primary w-20 w-xs-100 text-center">su72</p>
<p class="mb-0 text-primary w-20 w-xs-100 text-center">su73</p>
</div>
</div>
</div>
<div class="card d-flex flex-row mb-3">
<div class="d-flex flex-grow-1 min-width-zero">
<div class="card-body align-self-center d-flex flex-column flex-md-row justify-content-between min-width-zero align-items-md-center">
<p class="list-item-heading mb-0 truncate width-30 w-xs-100">User actions audit log</p>
<p class="mb-0 text-primary w-20 w-xs-100 text-center">log1</p>
<p class="mb-0 text-primary w-20 w-xs-100 text-center">log2</p>
<p class="mb-0 text-primary w-20 w-xs-100 text-center">log3</p>
</div>
</div>
</div>
As I am using a for loop (not the above one) to find the p tag in my html according to data given by user.
If only there's a solution for appending the next() function it would be a lot easier for me..
So is it possible??

See if this help you:
function getNext(selectorJquery, methodsValues) {
var next = $(selectorJquery);
$(methodsValues).each(function() {
for (var method in this) {
if (this[method] !== null) {
next = next[method](this[method]);
} else {
next = next[method]();
}
}
});
return next;
}
var methodsValues = [
{children: null},
{next: null},
{children: null},
{children: null},
{find: 'p'},
{eq: 3},
{text: null}
];
console.log($('div#bottomPart').children().next().children().children().find('p').eq(3).text());
console.log(getNext($('div#bottomPart'), methodsValues));
var otherMethodsValues = [
{children: null},
{next: null},
{next: null},
{children: null},
{children: null},
{find: 'p'},
{eq: 3},
{text: null}
];
console.log($('div#bottomPart').children().next().next().children().children().find('p').eq(3).text());
console.log(getNext('div#bottomPart', otherMethodsValues));

You can do what you are after with nextAll() and eq(). Below is an example that will select 2 lis after or 4 lis after the 3rd li.
$("#li3").nextAll().eq(1).css("color", "green")
$("#li3").nextAll().eq(3).css("color", "red")
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<ul>
<li>1</li>
<li>2</li>
<li id="li3">3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
If you really want to extend jQuery to add your own method you do it with jQuery.fn.
jQuery.fn.extend({
getNext: function(cnt) {
return $(this).nextAll().eq(cnt - 1)
},
})
$("#li3").getNext(2).css("color", "green")
$("#li3").getNext(4).css("color", "red")
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<ul>
<li>1</li>
<li>2</li>
<li id="li3">3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
Or doing it the way you were trying with next()
jQuery.fn.extend({
getNext: function(cnt) {
var elem = $(this)
while(cnt>0 && elem.length) {
elem = elem.next()
cnt--
}
return elem
},
})
$("#li3").getNext(2).css("color", "green")
$("#li3").getNext(4).css("color", "red")
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<ul>
<li>1</li>
<li>2</li>
<li id="li3">3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
In the end there is no need to do all that chaining when a simple jQuery selector can do it all.
var text = $("#bottomPart > div:eq(2) div.card-body > p:eq(2)").text()
console.log(text)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="bottomPart">
<div class="card d-flex flex-row mb-3 table-heading">
<div class="d-flex flex-grow-1 min-width-zero">
<div class="card-body align-self-center d-flex flex-column flex-md-row justify-content-between min-width-zero align-items-md-center" id="compareHeading">
<p class="list-item-heading mb-0 truncate width-30 w-xs-100">Parameters</p>
<p class="mb-0 text-primary w-20 w-xs-100 text-center">
<img class="card-img-top" style="width: 7rem; object-fit: contain;" src="/static/images/Go Digit General Insurance Company Ltd..jpg" alt="Go Digit General Insurance Company Ltd.">
</p>
<p class="mb-0 text-primary w-20 w-xs-100 text-center">
<img class="card-img-top" style="width: 7rem; object-fit: contain;" src="/static/images/Reliance General Insurance Company Ltd..jpg" alt="Reliance General Insurance Company Ltd.">
</p>
<p class="mb-0 text-primary w-20 w-xs-100 text-center">ENTERPRISE</p>
</div>
</div>
</div>
<div class="card d-flex flex-row mb-3">
<div class="d-flex flex-grow-1 min-width-zero">
<div class="card-body align-self-center d-flex flex-column flex-md-row justify-content-between min-width-zero align-items-md-center">
<p class="list-item-heading mb-0 truncate width-30 w-xs-100">Own Damage Cover</p>
<p class="mb-0 text-primary w-20 w-xs-100 text-center">od1</p>
<p class="mb-0 text-primary w-20 w-xs-100 text-center">od2</p>
<p class="mb-0 text-primary w-20 w-xs-100 text-center">od3</p>
</div>
</div>
</div>
<div class="card d-flex flex-row mb-3">
<div class="d-flex flex-grow-1 min-width-zero">
<div class="card-body align-self-center d-flex flex-column flex-md-row justify-content-between min-width-zero align-items-md-center">
<p class="list-item-heading mb-0 truncate width-30 w-xs-100">Team permissions</p>
<p class="mb-0 text-primary w-20 w-xs-100 text-center">tp1</p>
<p class="mb-0 text-primary w-20 w-xs-100 text-center">tp2</p>
<p class="mb-0 text-primary w-20 w-xs-100 text-center">tp3</p>
</div>
</div>
</div>

Fade effect does not work (Bootstrap 4)

I've managed to add an alphabetical filter on my index page.
My code gets inspired by this Bootsnip here: https://bootsnipp.com/snippets/featured/portfolio-gallery-with-filtering-category. This Bootsnip is based on Bootstrap 3.3
My index page is based on Bootstrap 4 Beta.
Is there any reason why there is no fade effect when I click on a letter to filter albums?
UPDATE:
I have updated the code according to the answer below. I'm now using Bootstrap cards but I'm still stuck with animations when I apply filter: no fade or smooth effect...
Here is my new fiddle: https://jsfiddle.net/md8fkm0d/5/
$(document).ready(function(){
$(".filter-button").click(function(){
var value = $(this).attr('data-filter');
if(value == "all") {
$('.filter').show('1000');
}
else {
$(".filter").not('.'+value).hide('3000');
$('.filter').filter('.'+value).show('3000');
}
});
if ($(".filter-button").removeClass("active")) {
$(this).removeClass("active");
}
$(this).addClass("active");
});
body {
font-family: Arial;
font-size: 14pt;
font-weight: bold;
color: #cc6110;
background-color: #e3e0ce; /* Nenesse 8/17/2017: New color */
background-image: url(images/background-woodenfloor.jpg); /* Nenesse 8/16/2017: New background image */
}
.title {
font-size : 24pt;
font-weight: bold;
color: #cc6110; /* Nenesse 8/16/2017: New color */
}
img {
border: 0;
}
a {
font-size: 14pt;
color: #285e80; /* Nenesse 8/16/2017: New color instead of #FFFFFF */
text-decoration: none;
}
a:hover {
text-decoration: underline;
color: #cc6110;
}
a:hover img#thumbimage {
text-decoration: none;
}
.artist { /* Nenesse 8/16/2017: New class for different color */
color: #285e80;
font-size:12pt;
font-weight:bold;
}
.album { /* Nenesse 8/16/2017: new class for different color */
color: #cc6110;
font-size:10pt;
font-weight:bold;
}
.navigationline {
padding: 2px 0px;
}
.btn-info {
background-color: #285e80;
border-color: #cc6110;
}
.btn-info:hover {
background-color: #cc6110;
border-color: #285e80;
}
.filter-button {
font-size: 18px;
border: 1px solid #cc6110;
border-radius: 5px;
text-align: center;
color: #cc6110;
margin-bottom: 30px;
}
.filter-button:hover {
font-size: 18px;
border: 1px solid #cc6110;
border-radius: 5px;
text-align: center;
color: #ffffff;
background-color: #285e80;
}
.btn-default:active .filter-button:active {
background-color: #285e80;
color: white;
}
.card {
margin-top: 30px;
}
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
<title>Album List</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"></link>
<link rel="StyleSheet" type="text/css" href="enhanced exportindex_wood.css"></link>
<meta http-equiv="cache-control" content="no-cache"/>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col col-lg-12 col-md-12 col-sm-12 col-xs-12" style="color: #cc6110;" align="center">
<h1 class="title">Album List</h1>
</div>
</div>
<div align="center">
<button class="btn btn-default filter-button" data-filter="all">All</button>
<button class="btn btn-default filter-button" data-filter="letterA">A</button>
<button class="btn btn-default filter-button" data-filter="letterB">B</button>
<button class="btn btn-default filter-button" data-filter="letterC">C</button>
<button class="btn btn-default filter-button" data-filter="letterD">D</button>
<button class="btn btn-default filter-button" data-filter="letterE">E</button>
<button class="btn btn-default filter-button" data-filter="letterF">F</button>
<button class="btn btn-default filter-button" data-filter="letterG">G</button>
<button class="btn btn-default filter-button" data-filter="letterH">H</button>
<button class="btn btn-default filter-button" data-filter="letterI">I</button>
<button class="btn btn-default filter-button" data-filter="letterJ">J</button>
<button class="btn btn-default filter-button" data-filter="letterK">K</button>
<button class="btn btn-default filter-button" data-filter="letterL">L</button>
<button class="btn btn-default filter-button" data-filter="letterM">M</button>
<button class="btn btn-default filter-button" data-filter="letterN">N</button>
<button class="btn btn-default filter-button" data-filter="letterO">O</button>
<button class="btn btn-default filter-button" data-filter="letterP">P</button>
<button class="btn btn-default filter-button" data-filter="letterQ">Q</button>
<button class="btn btn-default filter-button" data-filter="letterR">R</button>
<button class="btn btn-default filter-button" data-filter="letterS">S</button>
<button class="btn btn-default filter-button" data-filter="letterT">T</button>
<button class="btn btn-default filter-button" data-filter="letterU">U</button>
<button class="btn btn-default filter-button" data-filter="letterV">V</button>
<button class="btn btn-default filter-button" data-filter="letterW">W</button>
<button class="btn btn-default filter-button" data-filter="letterX">X</button>
<button class="btn btn-default filter-button" data-filter="letterY">Y</button>
<button class="btn btn-default filter-button" data-filter="letterZ">Z</button>
</div>
</div>
<hr/>
<div class="row">
<div style="" class="card bg-transparent col-lg-3 col-md-4 col-sm-6 filter letterB">
<a href="details/8660.html">
<img class="card-img-top rounded img-fluid" src="images/8660t.jpg" alt="Image Afrikan Basement - Unreleased Extended Versions - Disc 1"/>
</a>
<div class="card-block">
<h4 class="card-title text-center artist">Bolla</h4>
<p class="card-text text-center album">Afrikan Basement - Unreleased Extended Versions - Disc 1</p>
</div>
</div>
<div style="" class="card bg-transparent col-lg-3 col-md-4 col-sm-6 filter letterB">
<a href="details/8666.html">
<img class="card-img-top rounded img-fluid" src="images/8666t.jpg" alt="Image Afrikan Basement - Unreleased Extended Versions - Disc 2"/>
</a>
<div class="card-block">
<h4 class="card-title text-center artist">Bolla</h4>
<p class="card-text text-center album">Afrikan Basement - Unreleased Extended Versions - Disc 2</p>
</div>
</div>
<div style="" class="card bg-transparent col-lg-3 col-md-4 col-sm-6 filter letterJ letterD">
<a href="details/8881.html">
<img class="card-img-top rounded img-fluid" src="images/8881t.jpg" alt="Image A Journey To Rotterdam"/>
</a>
<div class="card-block">
<h4 class="card-title text-center artist">Jephté Guillaume | Diephuis</h4>
<p class="card-text text-center album">A Journey To Rotterdam</p>
</div>
</div>
<div style="" class="card bg-transparent col-lg-3 col-md-4 col-sm-6 filter letterL">
<a href="details/412.html">
<img class="card-img-top rounded img-fluid" src="images/412t.jpg" alt="Image La Home Box - Disc 4"/>
</a>
<div class="card-block">
<h4 class="card-title text-center artist">Laurent Garnier</h4>
<p class="card-text text-center album">La Home Box - Disc 4</p>
</div>
</div>
<div style="" class="card bg-transparent col-lg-3 col-md-4 col-sm-6 filter letterL letterT letterB">
<a href="details/376.html">
<img class="card-img-top rounded img-fluid" src="images/376t.jpg" alt="Image La Home Box - Disc 3"/>
</a>
<div class="card-block">
<h4 class="card-title text-center artist">Laurent Garnier | Traumer | Bambounou</h4>
<p class="card-text text-center album">La Home Box - Disc 3</p>
</div>
</div>
<div style="" class="card bg-transparent col-lg-3 col-md-4 col-sm-6 filter letterL letterT letterH">
<a href="details/447.html">
<img class="card-img-top rounded img-fluid" src="images/447t.jpg" alt="Image La Home Box - Disc 5"/>
</a>
<div class="card-block">
<h4 class="card-title text-center artist">Laurent Garnier | Traumer | Husbands</h4>
<p class="card-text text-center album">La Home Box - Disc 5</p>
</div>
</div>
<div style="" class="card bg-transparent col-lg-3 col-md-4 col-sm-6 filter letterL letterU letterM">
<a href="details/305.html">
<img class="card-img-top rounded img-fluid" src="images/305t.jpg" alt="Image La Home Box - Disc 1"/>
</a>
<div class="card-block">
<h4 class="card-title text-center artist">Laurent Garnier | Uner | Marc Romboy</h4>
<p class="card-text text-center album">La Home Box - Disc 1</p>
</div>
</div>
<div style="" class="card bg-transparent col-lg-3 col-md-4 col-sm-6 filter letterL letterV letterC">
<a href="details/341.html">
<img class="card-img-top rounded img-fluid" src="images/341t.jpg" alt="Image La Home Box - Disc 2"/>
</a>
<div class="card-block">
<h4 class="card-title text-center artist">Laurent Garnier | Voiski | Copy Paste Soul</h4>
<p class="card-text text-center album">La Home Box - Disc 2</p>
</div>
</div>
<div style="" class="card bg-transparent col-lg-3 col-md-4 col-sm-6 filter letterM">
<a href="details/10344.html">
<img class="card-img-top rounded img-fluid" src="images/10344t.jpg" alt="Image Dj-Kicks - Disc 1"/>
</a>
<div class="card-block">
<h4 class="card-title text-center artist">Moodymann</h4>
<p class="card-text text-center album">Dj-Kicks - Disc 1</p>
</div>
</div>
<div style="" class="card bg-transparent col-lg-3 col-md-4 col-sm-6 filter letterM">
<a href="details/10307.html">
<img class="card-img-top rounded img-fluid" src="images/10307t.jpg" alt="Image Dj-Kicks - Disc 2"/>
</a>
<div class="card-block">
<h4 class="card-title text-center artist">Moodymann</h4>
<p class="card-text text-center album">Dj-Kicks - Disc 2</p>
</div>
</div>
<div style="" class="card bg-transparent col-lg-3 col-md-4 col-sm-6 filter letterM">
<a href="details/10124.html">
<img class="card-img-top rounded img-fluid" src="images/10124t.jpg" alt="Image Dj-Kicks - Disc 3"/>
</a>
<div class="card-block">
<h4 class="card-title text-center artist">Moodymann</h4>
<p class="card-text text-center album">Dj-Kicks - Disc 3</p>
</div>
</div>
<div style="" class="card bg-transparent col-lg-3 col-md-4 col-sm-6 filter letterS letterL letterA letterR">
<a href="details/8897.html">
<img class="card-img-top rounded img-fluid" src="images/8897t.jpg" alt="Image Hagagatan Remixed"/>
</a>
<div class="card-block">
<h4 class="card-title text-center artist">Svreca | Lucy | Alexey Volkov | Rødhåd</h4>
<p class="card-text text-center album">Hagagatan Remixed</p>
</div>
</div>
<div style="" class="card bg-transparent col-lg-3 col-md-4 col-sm-6 filter letterT">
<a href="details/10673.html">
<img class="card-img-top rounded img-fluid" src="images/10673t.jpg" alt="Image North Star / Silent Space"/>
</a>
<div class="card-block">
<h4 class="card-title text-center artist">Tale Of Us</h4>
<p class="card-text text-center album">North Star / Silent Space</p>
</div>
</div>
<div style="" class="card bg-transparent col-lg-3 col-md-4 col-sm-6 filter letterT">
<a href="details/8820.html">
<img class="card-img-top rounded img-fluid" src="images/8820t.jpg" alt="Image Goddess Of A New Dawn"/>
</a>
<div class="card-block">
<h4 class="card-title text-center artist">The Bayara Citizens</h4>
<p class="card-text text-center album">Goddess Of A New Dawn</p>
</div>
</div>
<div style="" class="card bg-transparent col-lg-3 col-md-4 col-sm-6 filter letterT">
<a href="details/8719.html">
<img class="card-img-top rounded img-fluid" src="images/8719t.jpg" alt="Image Mofo Congoietric"/>
</a>
<div class="card-block">
<h4 class="card-title text-center artist">The Bayara Citizens</h4>
<p class="card-text text-center album">Mofo Congoietric</p>
</div>
</div>
<div style="" class="card bg-transparent col-lg-3 col-md-4 col-sm-6 filter letterT">
<a href="details/9074.html">
<img class="card-img-top rounded img-fluid" src="images/9074t.jpg" alt="Image The Girl And The Chameleon - Disc 1"/>
</a>
<div class="card-block">
<h4 class="card-title text-center artist">The Exaltics</h4>
<p class="card-text text-center album">The Girl And The Chameleon - Disc 1</p>
</div>
</div>
<div style="" class="card bg-transparent col-lg-3 col-md-4 col-sm-6 filter letterT">
<a href="details/9033.html">
<img class="card-img-top rounded img-fluid" src="images/9033t.jpg" alt="Image The Girl And The Chameleon - Disc 2"/>
</a>
<div class="card-block">
<h4 class="card-title text-center artist">The Exaltics</h4>
<p class="card-text text-center album">The Girl And The Chameleon - Disc 2</p>
</div>
</div>
<div style="" class="card bg-transparent col-lg-3 col-md-4 col-sm-6 filter letterT letterJ">
<a href="details/8777.html">
<img class="card-img-top rounded img-fluid" src="images/8777t.jpg" alt="Image Joaquin Joe Claussell Mixes"/>
</a>
<div class="card-block">
<h4 class="card-title text-center artist">The Lower East Side Pipes | Joe Claussell</h4>
<p class="card-text text-center album">Joaquin Joe Claussell Mixes</p>
</div>
</div>
</div>
<div class="row">
<br/>
<div class="value col-xs-6 col-sm-6 col-md-6" align="left">18/09/2017 00:18:40</div>
<div class="value col-xs-6 col-sm-6 col-md-6" align="Right">Powered by
<a target="_blank" href="https://www.collectorz.com/music" title="Music Collector">Music Collector</a> & JHR Enhanced Details template</div>
<br/>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<script src="indexfilter.js"></script>
</body>
Thanks for your help.

I copyied the code from the template you used and smashed it into your build. Your code looked pretty messy to me so I changed it. Of course you can change it back to your design, if you wish to. When pushing on one of the buttons the animations will now show as intended and I added more classes (So If you have the authors "Laurent Garnier | Traumer | Bambounou" you can find them by either clicking "L", "G", "T" or "B").
You can find the new .html on my webpage.
Remark: I do not know why the card-elements of bootstrap violate the grid-system. Figure that out by yourself ;) One Solution would be to add overflow-x: hidden; white-space: nowrap; to your body in a <style> tag in header, but that would also cut off all the text in the card-elements...
If you like it you can download the .html by [windows, FireFox] right-clicking and then "save page with name..."

The answer was simple to solve my problem: change the url source of jquery... my bad!