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>
Related
I have two flip cards with a hide/show toggle. but when I click the hide/show button on the second flipcard it doesn't work. How can I make it so that when the hide/show switch on the second flip card is clicked, it starts working. I hope you understand.
this is my flip cards
<div id="main">
<div name="first flip card" style="margin-left: 50px ;padding: ;">
<label>
<input type="checkbox" />
<div class="flip-card">
<div class="front">
<h1>Գերմանիա</h1>
<p style="font-size: 50px;">1</p>
</div>
<div class="back">
<h1>About me</h1>
<hr />
<p>some text</p>
<button id='button' >hide/show</button>
<p id="newpost" style="display: none;" > Test text</p>
<hr />
</div>
</div>
</label>
</div>
<div name="second flip card" style="margin-left: 50px ;">
<label>
<input type="checkbox" />
<div class="flip-card">
<div class="front">
<h1>Գերմանիա</h1>
<p style="font-size: 50px;">1</p>
</div>
<div class="back">
<h1>About me</h1>
<hr />
<p>some text</p>
<button id='button' >hide/show</button>
<p id="newpost" style="display: none;" > Test text</p>
<hr />
</div>
</div>
</label>
</div>
</div>
this is my script for hide/show button
<script>
var button = document.getElementById('button');
button.onclick = function() {
var div = document.getElementById('newpost');
if (div.style.display !== 'none') {
div.style.display = 'none';
}
else {
div.style.display = 'block';
}
};
</script>
i hope you can help me
I tried many options, but each had some kind of jamb. For example, I tried other scripts in one, the text was not shown at all, in the second option, when I pressed hide / show on the second flip card, it showed the text on the first flip card.
Welcome to stackoverflow.
According to the W3C Markup Validation Service tool, this document contains a number of errors, including a "Duplicate ID" error. (See: W3C Validator)
Note: The id global attribute defines an identifier (ID) which must be
unique in the whole document. Its purpose is to identify the element when linking (using a fragment identifier), scripting, or styling (with CSS). (See: HTML id at MDN)
So we need to use a class instead of newpost id to target those elements.
Change the HTML to the following content — by formatting the code and fixing those errors:
<div id="main">
<div style="margin-left: 50px;">
<input type="checkbox" />
<div class="flip-card">
<div class="front">
<h1>Գերմանիա</h1>
<p style="font-size: 50px;">1</p>
</div>
<div class="back">
<h1>About me</h1>
<hr />
<p>some text</p>
<button type="button">hide/show</button>
<p class="newpost" style="display: none;"> Test text</p>
<hr />
</div>
</div>
</div>
<div style="margin-left: 50px ;">
<input type="checkbox" />
<div class="flip-card">
<div class="front">
<h1>Գերմանիա</h1>
<p style="font-size: 50px;">1</p>
</div>
<div class="back">
<h1>About me</h1>
<hr />
<p>some text</p>
<button type="button">hide/show</button>
<p class="newpost" style="display: none;"> Test text</p>
<hr />
</div>
</div>
</div>
</div>
Script:
This script scans the entire DOM for all button elements. Then whenever you click on a button, it first finds the parentElement of that button and then toggles the first element with a newpost class inside the corresponding parentElement.
<script>
document.querySelectorAll('button').forEach((button) => {
button.addEventListener('click', (event) => {
const newpostElement = event.target.parentElement.querySelector('.newpost');
if (newpostElement.style.display !== 'none')
newpostElement.style.display = 'none';
else
newpostElement.style.display = 'block';
})
});
</script>
Learn about HTML errors:
Invalid use of name attribute for div element
Invalid use of padding: ;
Element div not allowed as child of element label
The label element may contain at most one button, input, meter, output, progress, select, or textarea descendant.
Duplicate ID button.
According to your Question , What I Understand you want something like this:=
$("h1").on("click", function(){
console.log($(this).children("div"));
$(this).siblings("div.content").slideToggle();
});
.content{
display:none;
margin: 10px;
}
h1{
font-size: 16px;
font-wieght: bold;
color: gray;
border: 1px solid black;
background: #eee;
padding: 5px;
}
h1:hover{
cursor: pointer;
color: black;
}
<div class="article">
<h1>TITLE 1</h1>
<div class="content">content 1</div>
</div>
<div class="article">
<h1>TITLE 2</h1>
<div class="content">content 2</div>
</div>
<div class="article">
<h1>TITLE 3</h1>
<div class="content">content 3</div>
</div>
<div class="article">
<h1>TITLE 4</h1>
<div class="content">content 4</div>
</div>
http://jsfiddle.net/Rwx7P/3/
You have two blocks with same ID (button and newpost), it must be always diffrent on one page.
function toggle(id) {
var div = document.getElementById(id);
if (div.style.display !== 'none') {
div.style.display = 'none';
}
else {
div.style.display = 'block';
}
}
<div id="main">
<div name="first flip card" style="margin-left: 50px; padding: ">
<label>
<input type="checkbox" />
<div class="flip-card">
<div class="front">
<h1>Գերմանիա</h1>
<p style="font-size: 50px">1</p>
</div>
<div class="back">
<h1>About me</h1>
<hr />
<p>some text</p>
<button onclick="toggle('newpost1')">hide/show</button>
<p id="newpost1" style="display: none">Test text</p>
<hr />
</div>
</div>
</label>
</div>
<div name="second flip card" style="margin-left: 50px">
<label>
<input type="checkbox" />
<div class="flip-card">
<div class="front">
<h1>Գերմանիա</h1>
<p style="font-size: 50px">1</p>
</div>
<div class="back">
<h1>About me</h1>
<hr />
<p>some text</p>
<button onclick="toggle('newpost2')">hide/show</button>
<p id="newpost2" style="display: none">Test text</p>
<hr />
</div>
</div>
</label>
</div>
</div>
I must create table without using <table>; only <div>. How I can set width (in percent) on some blocks so that others divide the rest of the space equally.
I can do it with JS but I think its possible with html/css only.
With flexbox it's rather easy to create a table like structure. Specify a flex basis for the table cells (boxes) + a grow and shrink to make them resize properly.
Check this fiddle with the demo :)
https://jsfiddle.net/xs0pmgbL/
HTML code:
<div id="container">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
And the CSS code:
#container {
display: flex;
flex-wrap: wrap;
}
.box {
border: 1px solid gray;
background: orange;
flex: 1 1 200px;
height: 100px;
}
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.
Hello I am implementing a web page in which I want to scroll down to the next element on click on an item. This is working fine when it has specific sequence but if I am to change an item in particular section after selecting wrong item this sequence gets messed up. Code snippet is given below.
$('.item').on('click', function(e) {
$(this).parent().parent().find('p')
.removeClass('selectedItem');
$(this).find('p')
.addClass('selectedItem');
e.preventDefault();
var $current = $('.first'),
$next = $current.nextAll('.step').first();
if (!$next.length) {
$next = $('.step').first();
}
if ($next.length) {
var $next = $next.first();
var top = $next.offset().top;
$current.removeClass('first');
$('body').stop(true, true).delay(1000).animate({
scrollTop: top
}, 1000, function() {
$next.addClass('first');
});
}
});
.selectedItem {
background-color: red;
}
.step {
background-color: blue;
height: 500px;
}
.item {
border: 2px white solid;
height: 50px;
width: 50px;
margin: 5px;
float: left;
}
p {
margin: 5px;
height: 40px;
width: 40px;
cursor:pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="step first">
<h1 class='section'>
First Section
</h1>
<div class="item">
<p>
hello
</p>
</div>
<div class="item">
<p>
hello
</p>
</div>
<div class="item">
<p>
hello
</p>
</div>
<div class="item">
<p>
hello
</p>
</div>
<div class="item">
<p>
hello
</p>
</div>
</div>
</div>
<div class="step">
<h1 class='section'>
Second Section
</h1>
<div class="item">
<p>
hello
</p>
</div>
<div class="item">
<p>
hello
</p>
</div>
<div class="item">
<p>
hello
</p>
</div>
<div class="item">
<p>
hello
</p>
</div>
<div class="item">
<p>
hello
</p>
</div>
</div>
<div class="step">
<h1 class='section'>
Third Section
</h1>
<div class="item">
<p>
hello
</p>
</div>
<div class="item">
<p>
hello
</p>
</div>
<div class="item">
<p>
hello
</p>
</div>
<div class="item">
<p>
hello
</p>
</div>
<div class="item">
<p>
hello
</p>
</div>
</div>
In above given example there are three section and lets say if I click on an item in section 1 then scroll goes down to the section 2. Same applies on section 2's item but if I manually scroll up to the previous section and re correct my item this sequence gets messed up.
The problem was that you were finding the next target by the added class, and not by the clicked element. this works
$('.item').on('click', function(e) {
$(this).parent().parent().find('p')
.removeClass('selectedItem');
$(this).find('p')
.addClass('selectedItem');
e.preventDefault();
var $current = $(this).closest(".step");
var $next = $current.next('.step');
console.log($next);
if (!$next.length) {
$next = $('.step').first();
}
var top = $next.offset().top;
$('body').stop(true, true).delay(1000).animate({
scrollTop: top
}, 1000);
});
.selectedItem {
background-color: red;
}
.step {
background-color: blue;
height: 500px;
}
.item {
border: 2px white solid;
height: 50px;
width: 50px;
margin: 5px;
float: left;
}
p {
margin: 5px;
height: 40px;
width: 40px;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="step first">
<h1 class='section'>
First Section
</h1>
<div class="item">
<p>
hello
</p>
</div>
<div class="item">
<p>
hello
</p>
</div>
<div class="item">
<p>
hello
</p>
</div>
<div class="item">
<p>
hello
</p>
</div>
<div class="item">
<p>
hello
</p>
</div>
</div>
</div>
<div class="step">
<h1 class='section'>
Second Section
</h1>
<div class="item">
<p>
hello
</p>
</div>
<div class="item">
<p>
hello
</p>
</div>
<div class="item">
<p>
hello
</p>
</div>
<div class="item">
<p>
hello
</p>
</div>
<div class="item">
<p>
hello
</p>
</div>
</div>
<div class="step">
<h1 class='section'>
Third Section
</h1>
<div class="item">
<p>
hello
</p>
</div>
<div class="item">
<p>
hello
</p>
</div>
<div class="item">
<p>
hello
</p>
</div>
<div class="item">
<p>
hello
</p>
</div>
<div class="item">
<p>
hello
</p>
</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