I'd like to check ancestry using two jQuery objects. They don't have IDs, and are only going to be available as jQuery objects (or DOM nodes if you called get()). jQuery's is() only works with expressions, so this code would be ideal but will not work:
var someDiv = $('#div');
$('a').click(function() {
if ($(this).parents().is(someDiv)) {
alert('boo');
}
}
Just want to see if one element is a child of another and I'd like to avoid stepping back into DOM land if possible.
You can use the index() method to check if an element exists in a list, so would the following work?
var someDiv = $('#div');
$('a').click(function() {
if ($(this).parents().index(someDiv) >= 0) {
alert('boo');
}
}
From #index reference.
Checking for (this).parents().index(someDiv) >= 0, as #Gareth suggests, will work just fine.
However, using the jQuery ancestry plugin is way faster / more efficient.
Along those lines, parents() optionally accepts a selector itself:
$('a').click(function() {
if ($(this).parents("#div").length) {
alert('boo');
}
});
One way would be to use the filter function
$('a').click(function() {
$(this).parents().filter(function() {
return this == someDiv[0];
}).each(function() {
alert('foo');
})
}
I think you may also be able to get away with using jQuery.inArray
if ($.inArray( someDiv, $(this).parents() ) ) {
alert('boo');
}
Would you not get the result you want from simply using a CSS selector?
$( '#div a' ).click( function() { ... } );
Try this:
var someDiv = $('#div');
$('a').click(function() {
if ($.inArray($(this).parents().get(), someDiv.get(0)) {
alert('boo');
}
}
var $element = $('a');
while ($element && !$element.is('someDiv')) {
var $element = $element.parent();
};
Related
In the following code, what does the empty jQuery selector $() mean? Does it mean $(document)?
var menu = {
setting:{
isSimpleData:true,
treeNodeKey:"mid",
treeNodeParentKey:"pid",
showLine:true,
root:{
isRoot:true,
nodes:[]
}
} ,
loadMenuTree:function(){
$("#menuTree").zTree(menu.setting, privilegeDate);
}
};
$().ready(function(){
menu.loadMenuTree();
});
does it mean $(document)?
No, it means an empty jQuery collection, but $.fn.ready doesn’t actually care what’s in the jQuery collection:
> $().length
0
> $.fn.ready
function (a){return n.ready.promise().done(a),this}
Note how it doesn’t make use of this except to return it for chaining. You could use $(document).ready, $().ready, $('body').ready, $('blink').ready… but the only non-deprecated way is by passing the listener to the jQuery function itself:
$(function () {
menu.loadMenuTree();
});
I want to use jQuery.each() method on XML child elements.
Below is my code.
$(function() {
var xml = "<approvalcontent><vac_applier>Name</vac_applier><vac_sdate>2017-02-03</vac_sdate><vac_edate>2017-02-10</vac_edate><vac_reason>kind</vac_reason></approvalcontent>";
bindContent(xml);
});
function bindContent(xml) {
$(xml).find("approvalcontent").children().each(function(){
alert("here!");
});
}
But this each function shows anything.
I want to roof as much as Xml elements.
How can I solve it?
jQuery's find() only works for descendants, your <approvalcontent> element is a root element, so what you wanted was probably filter() instead
$(xml).filter("approvalcontent")...
You should however be parsing the XML before accessing it, as that would give you an actual valid XML document to work with, and you could use find()
function bindContent(xml) {
var parsed = $.parseXML(xml);
$(parsed).find("approvalcontent").children().each(function() {
alert("here!");
});
}
Just use $(xml).children()
$(function() {
var xml = "<approvalcontent><vac_applier>Name</vac_applier><vac_sdate>2017-02-03</vac_sdate><vac_edate>2017-02-10</vac_edate><vac_reason>kind</vac_reason></approvalcontent>";
bindContent(xml);
});
function bindContent(xml) {
$(xml).children().each(function() {
console.log("here!");
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
You need to use .filter() instead of .find() as approvalcontent is at top level.
$(function() {
var xml = "<approvalcontent><vac_applier>Name</vac_applier><vac_sdate>2017-02-03</vac_sdate><vac_edate>2017-02-10</vac_edate><vac_reason>kind</vac_reason></approvalcontent>";
bindContent(xml);
});
function bindContent(xml) {
$(xml).filter("approvalcontent").children().each(function() {
alert("here!");
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
How can I provide a toggle for a dynamically created element?
My code does not work:
JS
$("body").on('toggle', ".buttonA", function(){
function() {
..do stuff
},
function() {
.. revert stuff
}
});
Try this:
$('body').on('click','.buttonA', function () {
var toggled = $(this).data('toggled');
$(this).data('toggled', !toggled);
if (!toggled) {
//..do stuff
}
else {
//.. revert stuff
}});
If you are using jQuery,you can use .live() methods for binding a dynamically created element.
$('#hello').live("click", function() {
alert( "Goodbye!" ); // jQuery 1.3+
});
I didn't use jQuery for a long time.So I don't know the method is valid or not.But it is very easy to write a new method to resolve this requirement.The more important thing is you bind the element whether or not.
that's pretty much it, how do I get the first four images from whatever url and then append them to a specified element
something like this:
$('document').ready(function(){
var thing = $.get('thing.html');
thing.slice(0,2).appendTo(".appending");
});
Try this
$('document').ready(function () {
var thing = $.get('HTMLPage.htm',
function (markup, b) {
var $page = $(markup);
$page.each(function (index, item) {
if (item.tagName == "IMG") {
$(item).appendTo(".appending");
}
});
});
});
Try this:
$('document').ready(function(){
var thing = $.get('thing.html');
thing.find('img').slice(0,4).appendTo(".appending");
});
$.get('thing.html', function(html){
//depending on what 'html' is made of, you may need to wrap it in a node
var $imgs = $(html).find('img').slice(0,4);
$(imgs).appendTo(".appending");
});
If you're expecting thing to contain HTML, try
$('document').ready(function(){
var thing = $.get('thing.html');
$(thing).filter('img').slice(0,4).appendTo(".appending");
});
.find('img') search only in descendants so if your thing contains img direcly It wouldn't work, try filter() instead http://jsfiddle.net/ouadie/UnNd9/
filter() – search through all the elements.
find() – search through all the child elements only.
http://www.mkyong.com/jquery/difference-between-filter-and-find-in-jquery/
At the moment I'm using the below function to perform a simple slide...
function jeans(jean, links) {
$(links).hide();
$(jean).hover(
function() {
$(links).show('slow');
},
function() {
$(links).hide('slow');
});}
And calling it where required with...
jeans('#red-jeans', '#red-jeans ul');
jeans('#blue-jeans', '#blue-jeans ul');
jeans('#yellow-jeans', '#yellow-jeans ul');
I'd like to be able to perform this by just attaching a class on the parent "#red-jeans".
I'm tring something like
function jeans(selector) {
$(selector 'ul').hide();
$(selector).hover(
function() {
$(selector 'ul').show('slow');
},
function() {
$(selector 'ul').hide('slow');
});}
...but my syntax is atrocious!
If someone can point me in the right direction it would be very much appreciated!
The issue is now that the slide runs on every element I've got the class on. Can anyone recommend an amend that would only activate it on the current hover? I presume a (this) is needed somewhere...
Thanks!
This:
$(selector 'ul').hide();
should be
$('ul', selector).hide();
Along with all the other similar places. What this does is looks for ul elements within selector
There are several ways you could achieve this in a clean way:
$(selector).find('ul')
$(selector + ' ul')
$('ul', selector)
are all equivalent.
In general I recommend you cache the selectors if you use them more often, because calling $() with a selector inside might be quite expensive. This way you have better performance and less trouble when refactoring.
To make the slides dependent on your current hover, use $(this) instead of the general selector.
function(selector){
var $element = $('ul', selector);
$element.hide();
$(selector).hover(
function() {
$(this).find('ul').show('slow');
},
function() {
$(this).find('ul').hide('slow');
});
}
Already answered, but this is a nice way of doing the same thing. You can create your own jQuery plugin like this...
$.fn.jeans = function() {
$(this).find("ul").hide();
$(this).hover(
function() {
$(this).find("ul").show('slow');
},
function() {
$(this).find("ul").hide('slow');
}
);
}
You call it by selecting the elements to apply it to and using it like a regular jQuery function...
$("#red-jeans, #blue-jeans, #yellow-jeans").jeans();
Just for future reference ;)
Just append string:
$(selector + ' ul').hide('slow');
you can try updating your JavaScript function as below:
function jeans(selector) {
// you will have to use 'find' and it wil only be for the first 'ul' as well
$(selector).find('ul:first').hide();
$(selector).hover(
function() {
$(selector).find('ul:first').show('slow');
},
function() {
$(selector).find('ul:first').hide('slow');
});
}
And then call it like this...
jeans('#red-jeans');
jeans('#blue-jeans');
jeans('#yellow-jeans');
I Hope this would help