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
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")
https://jsfiddle.net/072uwd1k/
I'm trying to change the number location to be placed above text, using insertBefore does just that but it's duplicating it for the number of divs in there.
<div class="box-wrap">
<div class="box">
<p class="text">ABC</p>
<p class="num">123</p>
</div>
<div class="box">
<p class="text">ABC</p>
<p class="num">123</p>
</div>
</div>
$('.num').insertBefore('.text');
While you have more classes num you need to use .each() and .prev() to get the previous .text element
$('.num').each(function(){
$(this).insertBefore($(this).prev('.text'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box-wrap">
<div class="box">
<p class="text">ABC</p>
<p class="num">123</p>
</div>
<div class="box">
<p class="text">ABC</p>
<p class="num">123</p>
</div>
</div>
So what you need is .each() to loop through .num elements ..
$(this) to get spacific .num element and $(this).prev('.text')
to select the previous .text
I have 2 divs on a block of content, one active and the other one is hidden.
I want to click on the div, hide the first one and show the second one.
Then when I click on the second one to hide it and show the first one.
I have however 12 more blocks with the same estructure and classes that need to have this functionality.
For the record I haven't make it work at all not even on one div.
<div class="feature-list-item">
<div class="first-one">
<div class="imgbox">
<p>some content<p/>
</div>
</div>
<div class="second-one">
<div class="imgbox">
<p>some content<p/>
</div>
</div>
And here is css:
.first-one {display:block;}
.second-one {display:none;}
I want to consider the easiest approach jquery, javascript it doesn't matter
Here is an example with isolated lists:
$(document).ready(function(){
$('.block').on('click', '.item', function(e){
$(this)
.removeClass('active')
.siblings('.item')
.addClass('active');
});
});
.blue .item {
background: blue;
}
.green .item {
background: green;
}
.item {
padding: 10px;
margin: 10px;
color: white;
display: none;
}
.item.active {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="block blue feature-list-item">
<div class="item active first-one">
<div class="imgbox">
<p>Box 1<p/>
</div>
</div>
<div class="item second-one">
<div class="imgbox">
<p>Box 2<p/>
</div>
</div>
</div>
<div class="block green feature-list-item">
<div class="item active first-one">
<div class="imgbox">
<p>Box 3<p/>
</div>
</div>
<div class="item second-one">
<div class="imgbox">
<p>Box 4<p/>
</div>
</div>
</div>
This is the solution I found. Hide clicked and show next. I hope you are trying to show next but not specific one, if specific you trying to show then you gonna change the code.
DEMO HERE
HTML
<div class="click show">
<div class="imgbox">
<p>some content<p/>
</div>
</div>
<div class="click hidden">
<div class="imgbox">
<p>some content<p/>
</div>
</div>
<div class="click hidden">
<div class="imgbox">
<p>some content<p/>
</div>
</div>
<div class="click hidden">
<div class="imgbox">
<p>some content<p/>
</div>
</div>
<div class="click hidden">
<div class="imgbox">
<p>some content<p/>
</div>
</div>
<div class="click hidden">
<div class="imgbox">
<p>some content<p/>
</div>
</div>
CSS
.show{
width:200px;
height:100px;
background-color:red;
}
.hidden{
display:none;
}
JS
$(document).ready(function(){
$('.click').click(function(){
$(this).removeClass('show');
$(this).addClass('hidden');
$(this).next('.hidden').addClass('show');
$(this).next('.hidden').removeClass('hidden');
});
});
<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>