using .eq closest to get upper div - javascript

I've tried using .closest, .parents and .eq to get this div selected on page load, and can not figure out why it is not working. My HTML is:
<div class="top">
<ul>
<li>
<div></div>
<ul class="first"></ul>
<div></div>
<ul class="first active">
<li><a class="current"></a></li>
</ul>
<ul class="first"></ul>
</li>
</ul>
So on page load I want the div above 'active' to change colors, but can't get it to work. I've tried:
$(document).ready(function () {
if ($('.current').is(':visible')){
$('.current').closest('div').addClass('active');
});

You have incorrect selector to target required div. You need to first traverse to parent ul element and then to its previous sibling div. Like this:
$('.current:visible').closest('ul').prev().addClass('active');

I think you are trying to select the prev sibling.
$('.current:visible').each(function(){
$(this).closest('ul').prev('div').addClass('active');
})

This should work:
$(document).ready(function () {
if ($('.current').is(':visible')){
$('.current').parents('.active').prev('div').addClass('active');
});

The div above .first.active in the source is a sibling, not a parent, hence why closest() doesn't work for you in the method you're using.
You can use closest() to get the parent ul, then prev() to get the div you require. Try this:
if ($('.current').is(':visible')) {
$('.current').closest('ul').prev('div').addClass('active');
});

.closest will look up the DOM tree to find the closest matching "parental" element. The div you are trying to get is actually a "sibling" of the <ul> so .closest won't find it.
So you would need to go up to the <ul>, then get the element "previous" to that.
$(document).ready(function () {
if ($('.current').is(':visible')){
$('.current').closest('ul').prev('div').addClass('active');
});

Related

get the parent element and find the button element and replace the text of it

I have this codes.
html
<div class="has_dropdown">
<button>Select branch</button>
<ul class="dropdownmenu">
<li><a href="#">Branch 1</li>
<li><a href="#">Branch 2</li>
<li><a href="#">Branch 3</li>
</ul>
</div>
and this jquery script
$('.dropdownmenu li a').click(function(){
//go to the .has_dropdown which is the parent container and find button element within it and then replace the text of it with the current click anchor element text.
$(this).parent('.has_dropdown').find('button').text($(this).text());
});
as you can see from the script code, it will go to the parent element .has_dropdown and then look for the button element inside of it and then replace the button's element text with the text of the current clicked element (.dropdownmenu li a) but sadly not working. Any help clues, ideas, suggestions, recommendations to make this work?
It's because the element .has_dropdown isn't the direct parent of the <a> element. You need to use the .closest() method instead.
Example Here
$('.dropdownmenu li a').click(function(){
$(this).closest('.has_dropdown').find('button').text($(this).text());
});
The .parent() method traverses to the immediate parent whereas the .closest method traverses up through its ancestors.
.parent() retrieves only the closest parent element, which is <li> in your html. If you prefer to get to the button by just using parent() you can do this:
$('.dropdownmenu li a').click(function(){
$(this).parent().parent().prev().text($(this).text());
});

.closest() returns undefined

I have the following list:
<div id="saved">
<ul class="list-group" style="display: block;">
<li class="marked list-group-item">box-shadow:<span class="marked_text">0px 0px rgb(200,200,200)</span>;<a class="pull-right multiple-shadows checkbox-active">Click</a>
</li>
</ul>
</div>
Now i want to store the text that is inside inside a variable.
I have written the following code:
$("body").on("click", "#saved ul li > a.multiple-shadows", function () {
$(this).toggleClass("checkbox-active");
var roll = $(this).closest("span").text();
console.log(roll);
});
The problem is that with .text() i get an empty value and with .html() i get undefined.Any ideas?
$.closest() gets the parent (https://api.jquery.com/closest/). What you need is $(this).siblings("span"). Also try to limit the number of selectors in jQuery. $('a.multiple-shadows') is more than enough.
EDIT: if you have more than one span siblings, to get the first one, use $(this).siblings("span").first()
closest finds the closest ancestor of an element. the span is a sibling of your a tag, so closest is correct to return undefined. your a is inside of an li, which is inside of a ul, which is inside of a div, so those are the only elements that closest will return anything for.
Since your span come before the a tag, you simple can use the .prev() function.
$(this).toggleClass("checkbox-active");
var roll = $(this).prev().text();
console.log(roll);
Fiddle: http://jsfiddle.net/hp9or7pf/
.closest "matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree" (https://api.jquery.com/closest/). Therefore, .closest will not match any siblings but ancestors. Instead, you can use .prev().
$("#saved").on("click", ".multiple-shadows",function(){
$(this).toggleClass("checkbox-active");
var roll=$(this).prev().text();
alert(roll);
});

jQuery - Adding classes from child elements to parent

I'm attempting to add the different classes from each separate anchor to their parent <li> tags. The general HTML code looks like this:
<ul class="list">
<li>
<div>Title Text</div>
<span class="tag">Class1 Link, Class2 Link, Class3 Link</span>
</li>
<li>
<div>Title Text</div>
<span class="tag">Class4 Link, Class5 Link, Class6 Link</span>
</li>
</ul>
The closest jQuery scripting I have works to an extent, but it is merely grabbing the first anchor class it encounters and adds it to every <li> tag in the unordered list.
$(window).load(function () {
$('span.tag a').each(function(){
var tagClass = $(this).attr("class");
$('span.tag a').closest('li').addClass(tagClass);
});
Any help in getting this to work properly would be much appreciated.
You should use $(this) instead of the $('span.tag a'), the latter select all the a elements and subsequently all the parent li elements. You can also use the .addClass() callback function:
$('ul.list > li').addClass(function() {
return $('span.tag a[class]', this).map(function() {
return this.className;
}).get().join(' ');
});
http://jsfiddle.net/UXSa7/
You should use the this reference to find the correct parent for that instance, rather than selecting them all again, which causes jQuery to take the first a tags parent li, then takes the class name of that element.
$(window).load(function () {
$('span.tag a').each(function(){
var tagClass = $(this).attr("class");
$(this).closest('li').addClass(tagClass);
});
});
You can also use $(function(){ instead of $(window).load(function () { to make this run as soon as the DOM is ready, rather then when all assets are loaded.

Find element above another using jQuery

I'm trying to find the element using jQuery from the following html.
<ul class="gdl-toggle-box">
<li class="">
<h2 class="toggle-box-title"><span class="toggle-box-icon"></span>Volunteer Form</h2>
<div class="toggle-box-content" style="">
</div>
</li>
</ul>
What I'm looking to do is when the h2 is clicked find the li above the h2 add a class active to it. Tried a few different calls but no luck.
EDIT
The biggest issue is that there are multiple toggle boxes on a page so something like this works on pages with a single toggle but pages with multiple the result is they all open together.
var gdl_toggle_box = jQuery('ul.gdl-toggle-box');
gdl_toggle_box.find('li').each(function(){
jQuery(this).addClass('item');
});
gdl_toggle_box.find('li').not('.active').each(function(){
jQuery(this).children('.toggle-box-content').css('display', 'none');
});
gdl_toggle_box.find('h2').click(function(){
if( jQuery('.item').hasClass('active') ){
jQuery('.item').removeClass('active').children('.toggle-box-content').slideUp();
}else{
jQuery('.item').addClass('active').children('.toggle-box-content').slideDown();
}
});
You can use closest.
closest will match the first parent element that matches the selector traversing up the DOM tree.
Demo
$('h2.toggle-box-title').click(function(){
$(this).closest('li').addClass('active');
});
Try this.
$('h2.toggle-box-title').click(function(){
$(this).parent().addClass('newclass');
});
try this:
$('h2.toggle-box-title').click(function() {
$(this).parent('li').addClass('active');
});
On you click in the button you can use the event:
$("something").parent().find("h2.myClass");
// And if you want you can add class after you find you object
http://api.jquery.com/find/
Selecting an element's parent
In order to select an element parent, you can use the parent() function.
Try this:
$('h2.toggle-box-title').click(function() {
$(this).parent('li').addClass('active');
});
*to be more specific, you target the parent you would like to choose by specifying its selector
Check the jQuery API Documentation here
parent() - Get the parent of each element in the current set of matched elements,
optionally filtered by a selector.

How can i know which class was selected via jQuery & JS

I have a list with links:
<li class="link-1">One</li>
<li class="link-2">Two</li>
<li class="link-3">Three</li>
..
user clicks on any link, then with jQuery I want to display the content of the link.. somthing like:
$(".link-??? a").click(function() {
alert($(".link-??? a").html());
})
something like this. I am not going to create X function (as the number of the links), so what can I do? I should replace the ??? in somtehing else..
You could do:
$('li[class^="link"] a').click(...
However this would only work if the li have only one class or if the link-X class is the first in the list.
Inside the handler you can use $(this) to refer to the a element:
alert($(this).text());
Much better would be to give the li elements a common class:
<li class="link">One</li>
<li class="link">Two</li>
<li class="link">Three</li>
$('.link a').click(... will be much more reliable.
Give each element the same class. Then in your javascript reference this within your function. Check out the link below to see a working example
http://jsfiddle.net/kprgr/2/
<li class="link">One</li>
<li class="link">Two</li>
<li class="link">Three</li>
$(".link").click(function() {
alert($(this).find("a").html());
});
Try..
$(".link-??? a").click(function() {
alert(this.innerHTML);
})
Inside the click event, this should refer to the element that was clicked.
You could also do..
alert($(this).html());
..but the first way is simpler, and faster.

Categories

Resources