<div class="d">
<p class="head"></p>
</div>
<div class="d">
<p class="head"></p>
</div>
<div class="d">
<p class="head"></p>
</div>
<div class="d">
<p class="head"></p>
<p class="head"></p>
</div>
<div class="d">
<p class="head"></p>
</div>
I have few block of '.d' , how to use each() to find whether '.head' is more than one? if yes, remove the duplicated '.head'
$('.d').each(function(index, value){
// find duplicated .head
}
Try to use .not() function along with :eq() selector to achieve what you want,
$('.d').each(function(){
$(".head",this).not(":eq(0)").remove();
});
DEMO
You don't need to use .each, just use a selector that matches all the duplicates after the first one.
$(".d .head:not(:nth-child(0))").remove();
Straight away you can do it in a single statement as:
$('.d').find(".head:gt(0)").remove();
You can also use :first-child
$('button').click(function() {
$(".d .head:not(:first-child)").remove();
})
.d {
border: 1px solid red;
padding: 5px;
margin-bottom: 5px;
}
.d .head {
border: 1px solid green;
padding: 5px;
margin-bottom: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="d">
<p class="head"></p>
</div>
<div class="d">
<p class="head"></p>
</div>
<div class="d">
<p class="head"></p>
</div>
<div class="d">
<p class="head"></p>
<p class="head"></p>
</div>
<div class="d">
<p class="head"></p>
</div>
<button>Remove</button>
Related
Please help me someone how to get Index of an Element which is located in different tag groups. I want to get the index of that tag which respect to the body tag.
$('.selectthis > .wrapper > p').click(function() {
// $('.selectthis').length return 3
var getParentIndex = $(this).closest('.selectthis').index();
$('.result').text(getParentIndex);
//How to get index as 3 of tag selecthis when i click on 'text3'
//When i click on text1 or text3 result is same 0
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="border: 1px solid green; margin: 10px;">
<div class="selectthis">
<div class="wrapper">
<p>
text1
</p>
</div>
</div>
<div class="selectthis">
<divc class="wrapper">
<p>
text2
</p>
</div>
</div>
</div>
<div style="border: 1px solid blue; margin: 10px;">
<div class="selectthis">
<divc class="wrapper">
<p>
text3
</p>
</div>
</div>
<p class="result">
</p>
</div>
The .selectthis elements are not siblings so to get the index of them related to each other you need to provide a selector to index() to find the current element within, eg. index('.selectthis')
Also note that the index of an element is zero-based, so the third element would return an index of 2. As such you need to add one to the value to get the output you want. Try this:
$('.selectthis > .wrapper > p').click(function() {
var getParentIndex = $(this).closest('.selectthis').index('.selectthis') + 1;
$('.result').text(getParentIndex);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="border: 1px solid green; margin: 10px;">
<div class="selectthis">
<div class="wrapper">
<p>
text1
</p>
</div>
</div>
<div class="selectthis">
<div class="wrapper">
<p>
text2
</p>
</div>
</div>
</div>
<div style="border: 1px solid blue; margin: 10px;">
<div class="selectthis">
<divc class="wrapper">
<p>
text3
</p>
</div>
</div>
<p class="result"></p>
</div>
There is no direct way as parent element of each selectthis is different.
One work around is, you can get the array of all selectthis and compare it with parent selectthis of clicked text.
see below code
$(function(){
$('.selectthis > .wrapper > p').click(function() {
var $selectThisArray = $('.selectthis');
var getParentIndex = 0;
var $parentElement = $(this).closest('.selectthis');
$.each($selectThisArray, function(index, val){
if($(val).is($parentElement)) {
getParentIndex = index;
}
});
$('.result').text(getParentIndex);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="border: 1px solid green; margin: 10px;">
<div class="selectthis">
<div class="wrapper">
<p>
text1
</p>
</div>
</div>
<div class="selectthis">
<div class="wrapper">
<p>
text2
</p>
</div>
</div>
</div>
<div style="border: 1px solid blue; margin: 10px;">
<div class="selectthis">
<div class="wrapper">
<p>
text3
</p>
</div>
</div>
<p class="result">
</p>
</div>
I want to remove style attribute from my HTML elements but only from one div, not full html code. For example:
<div class="row" style="width: 100px"></div>
<div class="container"><p style="font-size: 12px"></p> </div>
I want only delete 'style' from all elements in div with class 'container'.
You can use removeAttr() & children() like:
$('div.container').children().removeAttr('style');
DEMO:
$('div.container')
.children() // Get the children of each element in the set of matched elements
.removeAttr('style'); // Remove style attribute from each element
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row" style="width: 100px"></div>
<div class="container">
<p style="font-size: 12px">Test 1</p>
<p style="color: green; font-size: 12px">Test 2</p>
</div>
<hr/>
<div class="container2">
<p style="font-size: 12px">Test 1</p>
<p style="color: green; font-size: 12px">Test 2</p>
</div>
jQuery('.container*').attr('style','');
You can try this
$(".container").removeAttr("style")
I am trying to figure out how I can close the other div's when I expand one.
Look at my code here:
$( document ).ready(function() {
$( ".faq-question" ).click(function() {
$(this).toggleClass('open');
$(this).parent().next('.field-faq-answer').toggle();
});
});
.field-faq-answer{
display:none;
}
.faq-antwoord{
border-bottom: 1px solid #ccc;
margin-top:10px;
padding-bottom:10px;
}
.faq-antwoord p{
margin-bottom:0px;
padding-left: 10px;
border-left: 2px solid #3395d3;
margin-left:10px;
}
.field-faq-question-first{
border-top: 1px solid #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="faq-container">
<div class="field-faq-question field-faq-question-first">
<h3 class="faq-question">
Titel 1
</h3>
</div>
<div class="field-faq-answer">
<div class="faq-antwoord">
<p>
TEST 1
</p>
</div>
</div>
</div>
<div class="faq-container">
<div class="field-faq-question field-faq-question-first">
<h3 class="faq-question">
Titel 2
</h3>
</div>
<div class="field-faq-answer">
<div class="faq-antwoord">
<p>
TEST 2
</p>
</div>
</div>
</div>
<div class="faq-container">
<div class="field-faq-question field-faq-question-first">
<h3 class="faq-question">
Titel 3
</h3>
</div>
<div class="field-faq-answer">
<div class="faq-antwoord">
<p>
TEST 3
</p>
</div>
</div>
</div>
It is now possible to click on titel 1 and titel 2 and both content will be shown. But I want only want to show 1 answer and hide others
To do this you need to call hide() on all other .field-faq-answer elements except the one which was clicked, like this:
$(document).ready(function() {
$(".faq-question").click(function() {
$(this).toggleClass('open');
var $target = $(this).parent().next('.field-faq-answer').toggle();
$('.field-faq-answer').not($target).hide();
});
});
.field-faq-answer {
display: none;
}
.faq-antwoord {
border-bottom: 1px solid #ccc;
margin-top: 10px;
padding-bottom: 10px;
}
.faq-antwoord p {
margin-bottom: 0px;
padding-left: 10px;
border-left: 2px solid #3395d3;
margin-left: 10px;
}
.field-faq-question-first {
border-top: 1px solid #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="faq-container">
<div class="field-faq-question field-faq-question-first">
<h3 class="faq-question">
Titel 1
</h3>
</div>
<div class="field-faq-answer">
<div class="faq-antwoord">
<p>
TEST 1
</p>
</div>
</div>
</div>
<div class="faq-container">
<div class="field-faq-question field-faq-question-first">
<h3 class="faq-question">
Titel 2
</h3>
</div>
<div class="field-faq-answer">
<div class="faq-antwoord">
<p>
TEST 2
</p>
</div>
</div>
</div>
<div class="faq-container">
<div class="field-faq-question field-faq-question-first">
<h3 class="faq-question">
Titel 3
</h3>
</div>
<div class="field-faq-answer">
<div class="faq-antwoord">
<p>
TEST 3
</p>
</div>
</div>
</div>
Try this:
$( document ).ready(function() {
$( ".faq-question" ).click(function() {
$('.field-faq-answer').toggle();
$(this).toggleClass('open');
});
});
You can target all the other elements, except the ones you're working with, and close those
$( document ).ready(function() {
var questions = $( ".faq-question" ).on('click', function() {
$(this).toggleClass('open');
questions.not(this).removeClass('open');
var answer = $(this).parent().next('.field-faq-answer').toggle();
$('.field-faq-answer').not(answer).hide();
});
});
You can use nextAll() method for the parent of parent which is faq-container then use find to select field-FAQ-answer and toggle it.
$(this).parent().parent().nextAll('.faq-container').find('.field-faq-answer').toggle();
$( document ).ready(function() {
$( ".faq-question" ).click(function() {
$('.faq-container .field-faq-answer').hide();
$(this).toggleClass('open');
$(this).parent().next('.field-faq-answer').toggle();
});
});
.field-faq-answer{
display:none;
}
.faq-antwoord{
border-bottom: 1px solid #ccc;
margin-top:10px;
padding-bottom:10px;
}
.faq-antwoord p{
margin-bottom:0px;
padding-left: 10px;
border-left: 2px solid #3395d3;
margin-left:10px;
}
.field-faq-question-first{
border-top: 1px solid #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="faq-container">
<div class="field-faq-question field-faq-question-first">
<h3 class="faq-question">
Titel 1
</h3>
</div>
<div class="field-faq-answer">
<div class="faq-antwoord">
<p>
TEST 1
</p>
</div>
</div>
</div>
<div class="faq-container">
<div class="field-faq-question field-faq-question-first">
<h3 class="faq-question">
Titel 2
</h3>
</div>
<div class="field-faq-answer">
<div class="faq-antwoord">
<p>
TEST 2
</p>
</div>
</div>
</div>
<div class="faq-container">
<div class="field-faq-question field-faq-question-first">
<h3 class="faq-question">
Titel 3
</h3>
</div>
<div class="field-faq-answer">
<div class="faq-antwoord">
<p>
TEST 3
</p>
</div>
</div>
</div>
it's work try it.
I searched a lot on Stackoverflow, solution for my question, but no one of them helped me. I have a multiple show/hide (toggle) content, with same id's and I want to make, that the only one of them, what I need, opens, not all of them. There's my JSFiddle You can test it.
This is my JavaScript
$("#view").click(function(){
$('.hidden-content').slideToggle(500).toggleClass("active");
});
You cannot have duplicate id attributes within a single document. When you do only the first element with the given id is recognised; hence the issue you've seen.
Instead change the view elements to use a class, then use the this reference within the click event handler to traverse the DOM to find the related .hidden-content element and toggle it. Try this:
$(".view").click(function() {
$(this).closest('.div').find('.hidden-content').slideToggle(500).toggleClass("active");
});
.div {
width: 400px;
}
.content {
padding: 10px;
}
.view {
color: red;
cursor: pointer;
}
.hidden-content {
display: none;
}
.hidden-content .active {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div">
<div class="content">
<div class="view">view/edit</div>
</div>
<div class="hidden-content">
hidden content
</div>
</div>
<div class="div">
<div class="content">
<div class="view">view/edit</div>
</div>
<div class="hidden-content">
hidden content
</div>
</div>
<div class="div">
<div class="content">
<div class="view">view/edit</div>
</div>
<div class="hidden-content">
hidden content
</div>
</div>
It is a bad practice to use same id for more than one elements.
You can try the following
<div class="div">
<div class="content">
<div class="view">view/edit</div>
</div>
<div class="hidden-content">
hidden content
</div>
and your jquery will look like the following
$(".view").click(function(){
$(this).parent('.content').next('.hiddencontent').slideToggle(500).toggleClass("active");
});
You should replace the id to class. And for accordion, you can use like below.
HTML,
<div class="div">
<div class="content">
<div class="view">view/edit</div>
</div>
<div class="hidden-content">
hidden content
</div>
</div>
<div class="div">
<div class="content">
<div class="view">view/edit</div>
</div>
<div class="hidden-content">
hidden content
</div>
</div>
<div class="div">
<div class="content">
<div class="view">view/edit</div>
</div>
<div class="hidden-content">
hidden content
</div>
</div>
<div class="div">
<div class="content">
<div class="view">view/edit</div>
</div>
<div class="hidden-content">
hidden content
</div>
</div>
Js,
<script>
$(document).ready(function(){
$(".hidden-content").hide();
$(".view").on('click', function(){
$(this).parents().parents().find(".hidden-content").slideToggle(500).toggleClass("active");
if($(this).parents().parents().siblings().find(".hidden-content").hasClass('active')){
$(this).parents().parents().siblings().find(".hidden-content").removeClass('active');
$(this).parents().parents().siblings().find(".hidden-content").hide();
}
});
});
</script>
You can change your click event as follows to make it work.
$("div[id='view']").click(function() {
$(this).parent().next().slideToggle(500).toggleClass("active");
});
Note: You shouldn't have the same id for multiple elements, id attribute value should be unique why because the id attribute is used to identify an element uniquely in the DOM. You can have the same class name for different elements.
Please refer this answer it provides more information on how things work when multiple elements have the same id attribute value.
$("div[id='view']").click(function() {
$(this).parent().next().slideToggle(500).toggleClass("active");
});
.div {
width: 400px;
}
.content {
padding: 10px;
}
#view {
color: red;
cursor: pointer;
}
.hidden-content {
display: none;
}
.hidden-content .active {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div class="div">
<div class="content">
<div id="view">view/edit</div>
</div>
<div class="hidden-content">
hidden content
</div>
</div>
<div class="div">
<div class="content">
<div id="view">view/edit</div>
</div>
<div class="hidden-content">
hidden content
</div>
</div>
<div class="div">
<div class="content">
<div id="view">view/edit</div>
</div>
<div class="hidden-content">
hidden content
</div>
</div>
<div class="div">
<div class="content">
<div id="view">view/edit</div>
</div>
<div class="hidden-content">
hidden content
</div>
</div>
$(".view").click(function() {
$(this).closest('.div').find('.hidden-content').slideToggle(200).toggleClass("active");
});
.div {
width: 400px;
}
.content {
padding: 10px;
}
.view {
color: red;
cursor: pointer;
}
.hidden-content {
display: none;
}
.hidden-content .active {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div">
<div class="content">
<div class="view">view/edit</div>
</div>
<div class="hidden-content">
hidden content
</div>
</div>
<div class="div">
<div class="content">
<div class="view">view/edit</div>
</div>
<div class="hidden-content">
hidden content
</div>
</div>
<div class="div">
<div class="content">
<div class="view">view/edit</div>
</div>
<div class="hidden-content">
hidden content
</div>
</div>
I want to select the first element that matches my criteria OUTSIDE of my container. I know how to find it if it's inside but when it's outside, I"m not sure. I want to only select the very first element it finds also, this is my attempt:
$('.text').click(
function(){
$(this).css('font-size', '50px');
$(this).next('span').css('color','red');
});
.one{
background:orange;
border:1px solid black;
height:200px;
width:200px;
}
span{
display:block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>First</span>
<span>Second</span>
<div class="one">
<p class="text">
text
</p>
</div>
<span>First</span>
<span>Second</span>
<div class="one">
<p class="text">
text
</p>
</div>
<span>First</span>
<span>Second</span>
<div class="one">
<p class="text">
text
</p>
</div>
<span>First</span>
<span>Second</span>
So, in my example. If you click on the first text in the orange box labeled "text", it will change the color of the span directly outside it to red. Above the box and below it. It will not affect the other span, just the very first one.
$('.text').click(
function(){
$(this).css('font-size', '50px');
$(this).parent().next('span:first').css('color','red');
});
.one{
background:orange;
border:1px solid black;
height:200px;
width:200px;
}
span{
display:block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>First</span>
<span>Second</span>
<div class="one">
<p class="text">
text
</p>
</div>
<span>First</span>
<span>Second</span>
<div class="one">
<p class="text">
text
</p>
</div>
<span>First</span>
<span>Second</span>
<div class="one">
<p class="text">
text
</p>
</div>
<span>First</span>
<span>Second</span>
Use .parent() which will return parent element of mentioned element. .next() will return next element of the current element. :first will return first element from matched elements.
Try this:
$('.text').click(
function() {
$(this).css('font-size', '50px');
$(this).parent('.one').next('span:first').css('color', 'red');
});
.one {
background: orange;
border: 1px solid black;
height: 200px;
width: 200px;
}
span {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>First</span>
<span>Second</span>
<div class="one">
<p class="text">
text
</p>
</div>
<span>First</span>
<span>Second</span>
<div class="one">
<p class="text">
text
</p>
</div>
<span>First</span>
<span>Second</span>
<div class="one">
<p class="text">
text
</p>
</div>
<span>First</span>
<span>Second</span>
Please try this
$(this).parent().next('span:first').css('color','red');
FIDDLE DEMO
.parent() :Get the parent of each element in the current set of matched elements, optionally filtered by a selector.
:first : Given a jQuery object that represents a set of DOM elements, the .first() method constructs a new jQuery object from the first element in that set.
This will find very first elements above and below clicked div
$(this).parent().next('span:first').css('color','red');
$(this).parent().prev('span:first').css('color','red');
WORKING FIDDLE