I'm trying to do is when I click on a text, if another div has a child that contains this text fade in. but it's not working
$('.rel-head').click(function() {
if ($('.art-h .head-art'): contains($(this).text())) {
$(this).parent().fadeIn().siblings().fadeOut();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="art-h">
<div class="head-art">some text</div>
</div>
<div class="art-h">
<div class="head-art">anoter text</div>
</div>
<div class "related-heads">
<h1 class="rel-head">some text</h1>
</div>
Use selector :contains and concat the string properly.
$('.rel-head').click(function() {
if ($('.art-h .head-art:contains('+$(this).text()+')')) {
$(this).parent().fadeIn().siblings().fadeOut();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="art-h">
<div class="head-art">some text</div>
</div>
<div class="art-h">
<div class="head-art">anoter text</div>
</div>
<div class "related-heads">
<h1 class="rel-head">some text</h1>
</div>
It's not very efficient to search the entire body every time you click on each of the specified items.
This is what I'd do.
let headArtArray = $('.art-h .head-art'); //Assign it to a variable early to reduce searching
$('.rel-head').click(function() {
let el = $(this);
let text = el.text();
for (let i = 0; i < headArtArray.length; i++) {
if (headArtArray[i].innerText.includes(text)) {
el.parent().fadeIn();
} else {
$(headArtArray[i]).fadeOut();
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="art-h">
<div class="head-art">some text</div>
</div>
<div class="art-h">
<div class="head-art">anoter text</div>
</div>
<div class "related-heads">
<h1 class="rel-head">some text</h1>
</div>
Related
How to hide other and left just one that is click?
I tried something like this, but this doesn't work since all my divs has different ids
$(document).ready(function() {
$('.campingTrips').click(function(e) {
var image = e.target,
interval,
height = 200,
width = 200,
z = $(this).css("z-index");
$(this).css("z-index", z + 10);
$('#product-container').addClass('disable-click');
$('.unhidden').not($(this).parent().parent()).addClass('noOpacity');
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="campingTrips">
<h1>Camping trips</h1>
</div>
<div id="cityBreaks">
<h1>City breaks</h1>
</div>
<div id="roadTrips">
<h1>Road trips</h1>
</div>
<div id="cruises">
<h1>Cruises</h1>
</div>
<div id="groupTours">
<h1>Group tours</h1>
</div>
<div id="girlsTrips">
<h1>Girls’ trips</h1>
</div>
I'm using Java, Spring Boot, this is how I'm trying to include jQuery
<script src="webjars/jquery/1.9.1/jquery.min.js"></script>
<script src="webjars/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript" th:src="#{/js/index.js}"></script>
Edit: NEW CODE
So my html is now like this:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div id="campingTrips" class="clickable"><h1>Camping trips</h1>
</div>
<div id="cityBreaks" class="clickable"><h1>City breaks</h1>
</div>
<div id="roadTrips" class="clickable"><h1>Road trips</h1>
</div>
<div id="cruises" class="clickable"><h1>Cruises</h1>
</div>
<div id="groupTours" class="clickable"><h1>Group tours</h1>
</div>
<div id="girlsTrips" class="clickable"><h1>Girls’ trips</h1>
</div>
And js like this:
$(document).ready(function () {
$('clickable').on('click', function () {
var current = $(this).attr('id');
$('clickable:not(#' + current + ')').hide();
})
})
Error from inspect console is:
Uncaught ReferenceError: $ is not defined
at index.js:119:1
You can hide all and then show the clicked one, will have the same effect.
$('.clickable').on('click', (e) =>
{
// Hide all
$('.clickable').hide();
// Show this
$(e.target).closest('div').show();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div id="campingTrips" class="clickable"><h1>Camping trips</h1>
</div>
<div id="cityBreaks" class="clickable"><h1>City breaks</h1>
</div>
<div id="roadTrips" class="clickable"><h1>Road trips</h1>
</div>
<div id="cruises" class="clickable"><h1>Cruises</h1>
</div>
<div id="groupTours" class="clickable"><h1>Group tours</h1>
</div>
<div id="girlsTrips" class="clickable"><h1>Girls’ trips</h1>
</div>
But i strongly suggest to use a specific class for selecting those div elements, or base your code in a parent container.
you can do following:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="campingTrips">
<h1>Camping trips</h1>
</div>
<div id="cityBreaks">
<h1>City breaks</h1>
</div>
<div id="roadTrips">
<h1>Road trips</h1>
</div>
<div id="cruises">
<h1>Cruises</h1>
</div>
<div id="groupTours">
<h1>Group tours</h1>
</div>
<div id="girlsTrips">
<h1>Girls’ trips</h1>
</div>
and
<script>
$(document).ready(function() {
$('div').on('click', function() {
var current = $(this).attr('id');
$('div:not(#' + current + ')').hide();
})
})
</script>
It will hide every other div except the one that is clicked.
I want to get all anchor tag links text and push them into array, so all links text will be available into array, I tried using jquery but due to nested div it is unable to get each link text separately
let data = []
$(".main-class").each((i, elem) => {
data.push({
link_text: $(elem).find(".header-text a").text()
})
});
console.log(data)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div="main-class">
<div class="upper-class">
<section class="home-item">
<div> some text here</div>
<div class="header-text" >
Link 1 text
</div>
<div class="header-text" >
<p></p>
</div>
</section>
<section class="home-item">
<div> some text here</div>
<div class="header-text">
Link 2 text
</div>
<div class="header-text">
<p></p>
</div>
</section>
<section class="home-item">
<div> some text here</div>
<div class="header-text">
Link 3 text
</div>
<div class="header-text">
<p></p>
</div>
</section>
</div>
</div>
The cause is that .find("a").text() will combine all the texts for all the as into a single text - that's how jquery .text() works.
You need to "loop" each "a", not using a single .text() call against all of them.
Keeping to the nearest your code (with the .push), the simplest way is to change the selector, rather than add an inner .each
let data = []
$(".main-class .header-text a").each((i, elem) => {
data.push({
link_text: $(elem).text()
})
});
This can be shortened to a one-line by using .map which handles the creating of an array and .push for you:
let data2 = $(".main-class .header-text a").map((i, elem) => { return { link_text: elem.textContent }}).get();
Updated snippet (including typo fix)
let data = []
$(".main-class .header-text a").each((i, elem) => {
data.push({
link_text: $(elem).text()
})
});
//console.log(data)
let data2 = $(".main-class .header-text a").map((i, elem) => { return { link_text: elem.textContent }}).get();
console.log(data2)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main-class">
<div class="upper-class">
<section class="home-item">
<div> some text here</div>
<div class="header-text" >
Link 1 text
</div>
<div class="header-text" >
<p></p>
</div>
</section>
<section class="home-item">
<div> some text here</div>
<div class="header-text">
Link 2 text
</div>
<div class="header-text">
<p></p>
</div>
</section>
<section class="home-item">
<div> some text here</div>
<div class="header-text">
Link 3 text
</div>
<div class="header-text">
<p></p>
</div>
</section>
</div>
</div>
It work, you did mistake here : <div="main-class"> should be <div class="main-class">
EDIT : if you want separate item, you rather use map();
var arr = $(".main-class").find(".header-text a").map(function() {
return $(this).text();
}).get();
console.log(arr);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main-class">
<div class="upper-class">
<section class="home-item">
<div> some text here</div>
<div class="header-text" >
Link 1 text
</div>
<div class="header-text" >
<p></p>
</div>
</section>
<section class="home-item">
<div> some text here</div>
<div class="header-text">
Link 2 text
</div>
<div class="header-text">
<p></p>
</div>
</section>
<section class="home-item">
<div> some text here</div>
<div class="header-text">
Link 3 text
</div>
<div class="header-text">
<p></p>
</div>
</section>
</div>
</div>
With the press of a button, I want to toggle the class .active on the next div.bottom. These are basically accordions, but with a different structure.
Using nextElementSibling I guess won't work here to select the target element. How would one select such an element, that's neither a child nor a sibling (in plain JS)?
<div class="wrapper">
<div class="top">
<div class="inner">
<div><button></button></div>
</div>
</div>
<div class="bottom"></div>
</div>
<div class="wrapper">
<div class="top">
<div class="inner">
<div><button></button></div>
</div>
</div>
<div class="bottom"></div>
</div>
I'd do it by using closest to go up to the container .wrapper element, then querySelector to find the bottom element:
function onClick(event) {
const wrapper = event.target.closest(".wrapper");
const bottom = wrapper && wrapper.querySelector(".bottom");
if (bottom) {
bottom.classList.toggle("active");
}
}
Live Example:
// I've added event delegation here
document.body.addEventListener("click", function onClick(event) {
const button = event.target.closest(".inner button");
const wrapper = button && button.closest(".wrapper");
const bottom = wrapper && wrapper.querySelector(".bottom");
if (bottom) {
bottom.classList.toggle("active");
}
});
.active {
color: blue;
border: 1px solid black;
}
<div class="wrapper">
<div class="top">
<div class="inner">
<div><button>Button A</button></div>
</div>
</div>
<div class="bottom">Bottom A</div>
</div>
<div class="wrapper">
<div class="top">
<div class="inner">
<div><button>Button B</button></div>
</div>
</div>
<div class="bottom">Bottom B</div>
</div>
Or the same thing using optional chaining (relatively new):
function onClick(event) {
const wrapper = event.target.closest(".wrapper");
const bottom = wrapper?.querySelector(".bottom");
bottom?.classList.toggle("active");
}
Live Example:
// I've added event delegation here
document.body.addEventListener("click", function onClick(event) {
const button = event.target.closest(".inner button");
const wrapper = button?.closest(".wrapper");
const bottom = wrapper?.querySelector(".bottom");
bottom?.classList.toggle("active");
});
.active {
color: blue;
border: 1px solid black;
}
<div class="wrapper">
<div class="top">
<div class="inner">
<div><button>Button A</button></div>
</div>
</div>
<div class="bottom">Bottom A</div>
</div>
<div class="wrapper">
<div class="top">
<div class="inner">
<div><button>Button B</button></div>
</div>
</div>
<div class="bottom">Bottom B</div>
</div>
By using closest() you can traverse the DOM upwards. With this it's easy to just get the relevant .bottom and toggle the active class on this element.
document.querySelectorAll('button').forEach(button => {
button.addEventListener('click', (e) => {
e.currentTarget.closest('.wrapper').querySelector('.bottom').classList.toggle('active');
});
});
.bottom {
display: none
}
.bottom.active {
display: block
}
<div class="wrapper">
<div class="top">
<div class="inner">
<button type="button">Toggle</button>
</div>
</div>
<div class="bottom">Hidden content</div>
</div>
<div class="wrapper">
<div class="top">
<div class="inner">
<button type="button">Toggle 2</button>
</div>
</div>
<div class="bottom">Hidden content 2</div>
</div>
In my HTML there are eight div. I was able to get the number of the div using jQuery and insert it into the .num div element.
However when I delete one of the div by clicking the delete button, the number of divs in the span retrieved through jQuery won't update to the current number of divs remaining. It will still show 8.
How can I get the current number of div elements left in the DOM immediately after clicking the button?
setTimeout(() => {
if ($(".delete div").length > 0) {
$(".num span").html($(".delete div").length);
}
}, 100);
$("button").click(function() {
$(".delete div:last-child").remove();
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
```
<div class="delete">
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
<div class="div4">4</div>
<div class="div5">5</div>
<div class="div6">6</div>
<div class="div7">7</div>
<div class="div8">8</div>
</div>
<div class="num">Number of div: <span>0</span></div><br>
<button>delete</button>
The problem is because you're using setTimeout(), which only runs once after the specified delay.
For the pattern you're using to work you need to use setInterval() instead, which will run repeatedly at the set delay:
setInterval(() => {
if ($(".delete div").length > 0) {
$(".num span").html($(".delete div").length);
}
}, 100);
$("button").click(function() {
$(".delete div:last-child").remove();
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="delete">
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
<div class="div4">4</div>
<div class="div5">5</div>
<div class="div6">6</div>
<div class="div7">7</div>
<div class="div8">8</div>
</div>
<div class="num">Number of div: <span>0</span></div><br>
<button>delete</button>
However, using a timer for this is not ideal. As the number of div elements is only affected when the button is clicked, just update the .num span element in that event handler:
var $span = $(".num span").html($(".delete div").length);
$("button").click(function() {
$(".delete div:last-child").remove();
$span.html($(".delete div").length);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="delete">
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
<div class="div4">4</div>
<div class="div5">5</div>
<div class="div6">6</div>
<div class="div7">7</div>
<div class="div8">8</div>
</div>
<div class="num">Number of div: <span>0</span></div><br>
<button>delete</button>
I am trying to get first letter of firstname and lastname from a div and paste it in another div but it is pasting the same value in all divs and not taking unique value from each div.
Working Fiddle: https://jsfiddle.net/bv7w8dxg/1/
Issue Fiddle: https://jsfiddle.net/bv7w8dxg/
var takword = $('.nameholder').text().split(' ');
var text = '';
$.each(takword, function () {
text += this.substring(0, 1);
});
$('.avatarholder').text(text);
Markup
`
John Doe
<div class="main-holder">
<div class="nameholder">Kyle Davis</div>
<div class="avatarholder"></div>
</div>
<div class="main-holder">
<div class="nameholder">Seim Seiy</div>
<div class="avatarholder"></div>
</div>
<div class="main-holder">
<div class="nameholder">Momma Boy</div>
<div class="avatarholder"></div>
</div>`
You are using class selectors, which selects all elements with the given class name. That's why you have all the elements set with same value
You need to wrap your elements then process each row independently
I updated your code snippet to demonstrate this:
$('.row').each(function() {
var takword = $('.nameholder', this).text().split(' ');
var text = '';
$.each(takword, function () {
text += this.substring(0, 1);
});
$('.avatarholder', this).text(text);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="nameholder">John Doe</div>
<div class="avatarholder"></div>
</div>
<div class="row">
<div class="nameholder">Kyle Davis</div>
<div class="avatarholder"></div>
</div>
<div class="row">
<div class="nameholder">Seim Seiy</div>
<div class="avatarholder"></div>
</div>
<div class="row">
<div class="nameholder">Momma Boy</div>
<div class="avatarholder"></div>
</div>