Is it possible to achieve the following only using selector
$(this:parent:prev)
I wish to get prev of parent. I want to only use selector
There is no parent selector and previous sibling selector, so you've to use parent and prev methods
$(this).parent().prev();
And if you look at the jQuery Documentation for :parent, you don't really want :parent.
Select all elements that have at least one child node (either an element or text).
You can create a custom :parent selector in jQuery as follow:
$.extend($.expr[':'], {
parent: function(element, _, m) {
return $(element).parent();
}
});
$('span:parent').css('color', 'green').prepend('Hello World!');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
<span>Bye!</span>
</div>
In pure JavaScript this would be:
this.parentNode.prevElementSibling
Try
$(this).parent('div').prev();
Related
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.
I have a jquery selector that I would like to change so that it wont select <div id="divA"></div>.
Heres the current selector:
$('ul.toggle a').on('click', function () {
//does some work
});
I tried $('ul.toggle a [id!=divA]') but that thows errors.
What is the intended format for this selector?
You can use :not to remove elements from the set of matched elements.
$("ul.toggle a:not('#mhs-link')")
How about this-
$('ul.toggle a').not('#divA')
The .not() function simply removes elements from a previous list of elements. Because of some nifty function chaining, you can just insert that into your current definition -
$('ul.toggle a').not("#divA").on('click', function () {
//does some work
});
References
not() - Remove elements from the set of matched elements.
My code looks like this, in closeup:
<h2>
<span class="stuff">[<a id="someid">stuff</a>]</span> <span class="moreStuff">Another test</span>
</h2>
I've found a way to select my a element, and attach an id to it. What I need to do now is select its parent <h2> element, but not the <span> element. How can I do that (JQuery allowed)?
Edit: when I retrieve the selected <a>s, I get an array of them (there's lots of these structures on my page). When I try to write myArray[someIndex].closest("h2"), it says that the element does not have a closest() method. How would I go about this?
One ways is to use the .parents() method of jQuery, with a selector. Something like this.
$("#someid").parents("h2");
Update:
You can use the .closest() method with a selector, to only get the closest parent that match the selector.
$("#someid").closest("h2");
Update 2:
It would be a bit more work to do it with plain JavaScript. Not sure if it is the most efficient, but one way would be to select the element with document.getElementById() and then get a reference to its parent through the parentNode property. Then you would have to check if it is an h2 element, and if not, look at that elements parent node, and so on.
You could check the jQuery source and see how they have implemented the closest method.
I just needed the same thing. here a vanilla javascript variant:
function findParent(startElement, tagName) {
let currentElm = startElement;
while (currentElm != document.body) {
if (currentElm.tagName.toLowerCase() == tagName.toLowerCase()) { return currentElm; }
currentElm = currentElm.parentElement;
}
return false;
}
The <h2> is not the parent of the <a> but it is an ancestor, use .closest() to select it
$("#someid").closest("h2");
try use .parent() for get exactly double or more level up the DOM tree.
$("#someid").parent().parent();
I want to select all the child elements of a parent element (except the first) with jQuery and I have the below..
$("li:not(:first-child)");
But I'm not sure how I can apply it to just the certain parent ID, would something like this work?
$('#myID').("li:not(:first-child)");
If so, I then want to add an element before the respective <li> tag. Would I then be able to do this with?
$('#myID').("li:not(:first-child)").before('<li>Test</li>');
I'm guessing something above is wrong as it isn't working.
Close, just pass in the selector context:
$("li:not(:first-child)", "#myID")
http://api.jquery.com/jQuery/
jQuery( selector [, context] )
selector: A string containing a selector expression
context: A DOM Element, Document, or jQuery to use as context
EDIT:
My initial answer assumed that you have no more li within the child's li. if you strictly only wants to select the children, use >:
$("#myID > li:not(:first-child)")
There's different solutions:
$("li:not(:first-child)", "#myID"); // see #SiGanteng answer
$("#myID li:not(:first-child)");
$("#myID").find("li:not(:first-child)");
Simple: using the :gt() help selector:
Just do it like: demo fiddle
$("#myID li:gt(0)").before('<li>Test</li>');
If you are concerned about speed :) :
$("#myID").find("li:gt(0)").before('<li>Test</li>');
or like: demo fiddle
$("#myID li:not(:first-child)").before('<li>Test</li>');
Assuming #myID is a ul or ol element, another possible way to get all children but the first is
$('#myID').children().slice(1)
I am trying to select elements of a (certain class || another class) with the same selector. How can I go about doing that?
Currently, I have:
$(".class1 .class2").each(function(idx, el) {... });
however, that only selects elements that match both classes, not one or the other.
How can I select elements that match one or both of the classes, with the same selector?
Try this
$(".class1,.class2")
http://api.jquery.com/multiple-selector/
$(".class1,.class2").each(function(idx, el) {... });
put a comma within the same selector string.
http://api.jquery.com/multiple-selector/