I want to alert panel-heading text when I click panel-footer
thanks in advance i tried .val() also but not working
$('.panel .panel-footer').on('click',function (e) {
alert($(this).parent('.panel').closest('.panel-heading .panel-title').text());
});
<div class="panel">
<div class="panel-heading">
<h3 class="panel-title">Super Admin</h3>
<div class="right">
on type="button" class="btn-toggle-collapse"><i class="lnr lnr-question-circle"></i></button>
</div>
</div>
<div class="panel-body">
<div>0 Members</div>
</div>
<div class="panel-footer">
<div>View All<i class="lnr lnr-arrow-right pull-right"></i></div>
</div>
</div>
Update closest to find, closest goes up and not down
$('.panel .panel-footer').on('click',function (e) {
alert( $(this).parent('.panel').find('.panel-title').text() );
});
https://api.jquery.com/closest/ it traverses up the DOM tree
Description: For each element in the set, get the first element that
matches the selector by testing the element itself and traversing up
through its ancestors in the DOM tree.
but you want to traverse down since you are already at the parent level($(this).parent('.panel')).
So we use find() https://api.jquery.com/find/ which traverses down
Description: Get the descendants of each element in the current set of
matched elements, filtered by a selector, jQuery object, or element.
If you prefer the 'siblings' approach, that will work, as you're triggering off the panel-footer el.
$('.panel .panel-footer').on('click',function (e) {
console.log($(this).siblings(".panel-heading").text() );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel">
<div class="panel-heading">
<h3 class="panel-title">Super Admin</h3>
<div class="right">
<button type="button" class="btn-toggle-collapse"><i class="lnr lnr-question-circle"></i></button>
</div>
</div>
<div class="panel-body">
<div>0 Members</div>
</div>
<div class="panel-footer">
<div>View All<i class="lnr lnr-arrow-right pull-right"></i></div>
</div>
</div>
Replace closest() by find():
$('.panel .panel-footer').on('click',function (e) {
alert($(this).parent('.panel').find('.panel-heading .panel-title').text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel">
<div class="panel-heading">
<h3 class="panel-title">Super Admin</h3>
<div class="right">
<button type="button" class="btn-toggle-collapse"><i class="lnr lnr-question-circle"></i></button>
</div>
</div>
<div class="panel-body">
<div>0 Members</div>
</div>
<div class="panel-footer">
<div>View All<i class="lnr lnr-arrow-right pull-right"></i></div>
</div>
</div>
Related
In a dom which has many of the blocks like the one below, I'd like to get name of pid element (i.d 123) when link is clicked:
<div class="a-post">
<a class="pid" name="123"></a>
<div class="row">
<p>Some text</p>
</div>
<br>
<div class="row">
<div class="col-xs-12">
<p>Othe text </p>
</div>
<br>
<div class="row">
<div class="col-xs-1">
<img class="link" src="link.svg">
</div>
</div>
</div>
</div>
Here is my jQuery:
$(document).ready(function () {
$(".link").click(function () {
let pid = $(this).parent(".a-post").find(".pid").attr('name');
console.log('pid is:', pid);
}
});
But I get pid is: undefined
How can I fix this?
You have to use .closest() and not .parent(), because .parent() only goes 1 step up. .closest() will continue until it reach the top or finds the element.
$(document).ready(function() {
$(".link").click(function() {
let pid = $(this).closest(".a-post").find(".pid").attr('name');
console.log('pid is:', pid);
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="a-post">
<a class="pid" name="123"></a>
<div class="row">
<p>Some text</p>
</div>
<br>
<div class="row">
<div class="col-xs-12">
<p>Othe text </p>
</div>
<br>
<div class="row">
<div class="col-xs-1">
<img class="link" src="link.svg">
</div>
</div>
</div>
</div>
I'm currently working on a client script in jQuery and I'm trying to make it as generic as possible.
I'm looking for a way to select a div with the class ".targets" from a button click.
My markup looks something like this:
<form>
<!-- Products section -->
<div class="products">
<div class="container">
<div class="form-group">
<div class="col-md-12">
<button type="button" class="btn-add">Add</button>
</div>
</div>
<div class="targets">
...
</div>
</div>
</div>
<!-- Resources section, slightly different markup -->
<div class="resources">
<div class="container">
<br/>
<div class="form-group">
<button type="button" class="btn-add">Add</button>
</div>
<br/>
<div class="targets">
...
</div>
</div>
</div>
</form>
My jQuery looks like this:
$("form").on("click", "btn-add", function(e){
var targets = $(this).parent().parent().next();
});
This solution works "somehow", but what if the markup changes?
Is there a way in jQuery to select the closest div with the class ".targets" on button click?
Thanks :)
Use (this).closest(".container").find(".targets");
this will select the closest element with the class container and search for an element in that with the class targets
$("form").on("click", ".btn-add", function(e){
var targets = $(this).closest(".container").find(".targets");
console.log($(targets).text().trim())
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<!-- Products section -->
<div class="products">
<div class="container">
<div class="form-group">
<div class="col-md-12">
<button type="button" class="btn-add">Add</button>
</div>
</div>
<div class="targets">
target1
</div>
</div>
</div>
<!-- Resources section, slightly different markup -->
<div class="resources">
<div class="container">
<br/>
<div class="form-group">
<button type="button" class="btn-add">Add</button>
</div>
<br/>
<div class="targets">
target2
</div>
</div>
</div>
</form>
If you know they will always be within the .products element, you could do:
$(this).closest('.products').find('.targets');
A helpful guide for jQuery traversing methods: http://api.jquery.com/category/traversing/
Try this:
$(this).closest('.container').find('.targets')
You could use closest() which searches for selector higher up in tree and find() which searches for selector going down the tree
$(this).closest('.container').find('.targets')
here is my HTML code
<div id="parent">
<div id="computer">
<div id="items">
<div id="1">hp</div>
<div id="2">compaq</div>
<div id="3">toshiba</div>
</div>
</div>
<div id="laptop">
<div id="1">i5</div>
<div id="2">dual core</div>
<div id="3">i3</div>
</div>
<div id="printer">
<div id="laser">hp laser</div>
</div>
<div id="cpu">
<div id="item">
<div id="1">pintuim</div>
<div id="2">celeron</div>
</div>
</div>
<div id="scanner">
<div id="canon">
<div>canon</div>
</div>
</div>
</div>`
I am trying to get the id of each first element of the parent div
that is to get an
array=[computer, laptop, printer, cpu, scanner]
here is my jquery code but it's taking everything.
var a = $("div.content :nth-child(1)")find("*").toArray();
please I need some help thanks
there is a selector in jQuery which will return the first level of children: DEMO
var a=[];
$("#parent > div").each(function(){ // using > will return the first level of children
a.push($(this).attr('id'));
});
alert(a);
Those are children of the #parent element so you can iterate over that and create an array out of it using .map()
var array = $('#parent').children().map(function() {
return this.id;
}).get();
snippet.log(array)
<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="parent">
<div id="computer">
<div id="items">
<div id="1">hp</div>
<div id="2">compaq</div>
<div id="3">toshiba</div>
</div>
</div>
<div id="laptop">
<div id="1">i5</div>
<div id="2">dual core</div>
<div id="3">i3</div>
</div>
<div id="printer">
<div id="laser">hp laser</div>
</div>
<div id="cpu">
<div id="item">
<div id="1">pintuim</div>
<div id="2">celeron</div>
</div>
</div>
<div id="scanner">
<div id="canon">
<div>canon</div>
</div>
</div>
</div>
I have a div with the ID wrapper, and I am using .append() to insert some content at the end of that div, like this:
$("#wrapper").append('<div class="content"><div class="subcontent">Some stuff</div></div>');
However, I also want the option to insert a new child before the last content div in the wrapper.
So if the HTML output looks like this:
<div id="wrapper">
<div class="content">
<div class="subcontent">
First
</div>
</div>
<div class="content">
<div class="subcontent">
Second
</div>
</div>
</div>
I want to insert an element before the last one, so I get this:
<div id="wrapper">
<div class="content">
<div class="subcontent">
First
</div>
</div>
<div class="content">
<div class="subcontent">
Third
</div>
</div>
<div class="content">
<div class="subcontent">
Second
</div>
</div>
</div>
How would I do this?
You could use .before() to add a sibling before the element:
$("#wrapper .content:last").before('<div class="content"><div class="subcontent">Third</div></div>');
.insertBefore() does the same thing with a different syntax, namely that you select the element to be added, and pass the element you want to add it before.
$("#wrapper .content:last").before('<div class="content"><div class="subcontent">Third</div></div>');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="wrapper">
<div class="content">
<div class="subcontent">
First
</div>
</div>
<div class="content">
<div class="subcontent">
Second
</div>
</div>
</div>
You can use insertBefore():
$('<div class="content"><div class="subcontent">Some stuff</div></div>').insertBefore('#wrapper > div:last');
Or before():
$('#wrapper > div:last').before('<div class="content"><div class="subcontent">Some stuff</div></div>');
This is how I got there:
http://jsfiddle.net/lharby/00tk6avg/
var htmlString = '<div class="subcontent">Some stuff</div>';
$(htmlString).insertBefore('.content div:last');
Select the last element with :last-of-type and use before() to append the new element:
$('.content:last-of-type').before('<div class="new">test</div>');
.new { color:red }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="wrapper">
<div class="content">
<div class="subcontent">
First
</div>
</div>
<div class="content">
<div class="subcontent">
Second
</div>
</div>
</div>
Use insertBefore:
$('<div class="content"><div class="subcontent">Third</div></div>').insertBefore('#wrapper .content:last');
Insert every element in the set of matched elements before the target.
Demo: http://api.jquery.com/insertBefore/
$( "<p>Test</p>" ).insertBefore( "#wrapper > div:last-child" );
You can last() for selecting last item, and before() for appending
$("#wrapper .content").last().before('<div class="content"><div class="subcontent">Some stuff</div></div>');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="wrapper">
<div class=" content ">
<div class="subcontent ">
First
</div>
</div>
<div class="content ">
<div class="subcontent ">
Second
</div>
</div>
</div>
you can use nth last child to select the second last div.
fiddle:
http://jsfiddle.net/08ta9wnL/
html:
<div id="wrapper">
<div class="content">
<div class="subcontent">
First
</div>
</div>
<div class="content">
<div class="subcontent">
Second
</div>
</div>
</div>
javascript:
$(document).ready(function(){
$("#wrapper div:nth-last-child(2)").append('<div class="content"><div class="subcontent">Some stuff</div></div>');
});
You can do like this
$("#wrapper .content:last").before("<div class="content"><div class="subcontent">Some stuff</div></div>");
Have a look at fiddle https://jsfiddle.net/48ebssso/
I'm not exactly sure what it is that i need, so the following explanation may not be clear - please let me know if not.
I want to slideToggle a specific clicked div, the code i currently have of course slideToggle's all instances of the div with a class of .open-statement, but i want to only toggle the one instance of this class that appears inside the parent div .agenda-content. There will be numerous instances of .open-statement on the page eventually, but only one of them should toggle (the one that's inside the current clicked div).
HTML
<div class="agenda-content">
<div class="row stance-row">
<div class="col-xs-3 no_padding">
1
</div>
<div class="col-xs-2">
Obamacare
<button class="btn btn-orange">Remove Stance</button>
</div>
<div class="col-xs-2">
Add jQuery UI here
</div>
<div class="col-xs-2">
34
</div>
<div class="col-xs-2 no_padding">
Wayne Rooney
</div>
</div>
<div class="row no-row-style">
<div class="open-statement">
<div class="col-xs-4 col-xs-offset-1">
<div class="your-statement">
<textarea placeholder="Please write your statement"></textarea>
<button class="btn btn-orange">Edit</button>
</div>
</div>
<div class="col-xs-7 no_padding">
<div class="statement-actions">
<button class="btn btn-alert">Deactivate</button>
<button class="btn btn-lt-secondary">View Debates</button>
<button class="btn btn-orange">Unsupport</button>
</div>
</div>
</div>
</div>
<div class="row stance-row">
<div class="col-xs-3 no_padding">
2
</div>
<div class="col-xs-2">
Raise Minimum Wage
<button class="btn btn-orange">Take a Stance</button>
</div>
<div class="col-xs-2">
Add jQuery UI here
</div>
<div class="col-xs-2">
34
</div>
<div class="col-xs-2 no_padding">
Stephen King
</div>
</div>
<div class="row no-row-style">
<div class="open-statement">
<div class="col-xs-4 col-xs-offset-1">
<div class="your-statement">
<textarea placeholder="Please write your statement"></textarea>
<button class="btn btn-orange">Edit</button>
</div>
</div>
<div class="col-xs-7 no_padding">
<div class="statement-actions">
<button class="btn btn-alert">Deactivate</button>
<button class="btn btn-lt-secondary">View Debates</button>
<button class="btn btn-orange">Unsupport</button>
</div>
</div>
</div>
</div>
</div>
jQuery
$(document).ready(function () {
$(".stance-row").click(function () {
$(".agenda-content").find(".open-statement").slideToggle();
});
});
.agenda-content is the parent of all .open-statement. You need to be more specific. Use .next and .find() :
$(document).ready(function () {
$(".stance-row").click(function () {
$(this).next().find(".open-statement").slideToggle();
});
});
You are almost there, you just need to change your code to get respective next item.
$(document).ready(function () {
$(".stance-row").click(function () {
$(this).next("div.row").find(".open-statement").slideToggle();
});
});
DEMO : http://jsfiddle.net/6GMj7/
Cheers,
Ashok
Use this:
$(this).closest(".agenda-content").find(".open-statement").slideToggle();