Using `Not` with `Delegate` - Jquery - javascript

I currently have something like this:
$(".jtable tbody td").not(".DeleteLicense").hover(
How can I use delegate with this? Something like
$("#resultContainer,#approvalContainer,#createNewContainer").delegate(".jtable tbody td....
Thanks!

You can use the :not() selector to move the negation in to your selector.
$("#resultContainer,#approvalContainer,#createNewContainer")
.delegate(".jtable tbody td:not(.DeleteLicense)", "...", ...);
Note that the jQuery documentation recommends using the .not() function rather than the :not() selector in most cases, but I'm not sure if it is possible in this case.
If you're willing to use another approach, you may find that you could use the .jtable tbody td selector in your call to delegate, and then use if(!$(this).is(".DeleteLicense")) { ... } in your event handler to only process elements that meet your criteria.

Like this:
$("#resultContainer,#approvalContainer,#createNewContainer").delegate(".jtable tbody td:not('.DeleteLicense')", "hover", function(eventObj) {
// handler code
});

My first thought would be to try and use the :not() selector:
$("#resultContainer,#approvalContainer,#createNewContainer").delegate(".jtable tbody td:not('.DeleteLicense')", "hover", function(){ /* do stuff */});

Related

Combine inverse property and inverse class selector with existing selector

I have this jQuery code:
$("#Filter ul input:checked").each(function () {
if (!$(this).prop("disabled") && !$(this).hasClass("ignoreInput")) {
Can this be written in only one selector? Right now I'm taking in too many elements to test with the if statement.
Is it also better to use .find(selector) instead of writing all in one selector?
$(document.body).find("#Filter ul ...)
You could use a combination of :not() along with the attribute selector, like this:
$("#Filter ul input:checked:not([disabled],.ignoreInput)").each(function () {
// your logic here
});
Is it also better to use .find(selector) instead of writing all in one selector?
This makes little to no performance difference.

Using jQuery to renumber all the table rows after a row has been removed

How can the function below be modified such that the row count will start at 1 as opposed to being zero-based, and then if possible sort the table rows in ascending order (least to greatest).
Here is the code in question:
$("tr.highlighted").remove();
renumberRows()
function renumberRows() {
$('#data tr').each(function(index, el){
$(this).children('td').first().text(index++);
});
}
The simplest solution is to use CSS counters (all non-counter related CSS removed for brevity):
table {
counter-reset: rowCounter;
}
tr td:first-child {
counter-increment: rowCounter;
}
td:first-child::before {
content: counter(rowCounter);
}
JS Fiddle demo
The above, of course, uses a simple means of removing a row that may, or may not, resemble your own approach; this is, however, irrelevant as the CSS will automatically re-number the rows.
With jQuery, however, you'd need to explicitly re-count the tr elements once the .remove() has fired. If remove() allowed a callback function that'd be easy:
$(this).remove(function(){
renumberRows();
});
But, of course, there is no provision for a callback in the remove() method. So, instead, we need to use $.when() and .then():
$.when($(this).remove()).then(renumberRows);
JS Fiddle demo
Which basically calls the renumberRows() function once the $(this).remove() has been executed.
Though, having thought of a somewhat stupid-feeling solution I thought I'd try using:
$(this).remove(renumberRows());
Which, against my expectations, works: JS Fiddle demo. And is somewhat simpler than using the $.when().then() chain.
References:
CSS:
"Using CSS Counters."
::before pseudo-element.
::before and ::after pseudo-elements.
jQuery:
jQuery.then().
jQuery.when().

change jquery selector to not select particular div id

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.

jQuery colon selectors

In jQuery there are a few colon selectors like
:prev, :next, :last
My question is:
Are they truly part of jQuery, because they are actually used on DOM elements?
We seem to have equivalent methods as well in jQuery prev(), next(), last(). What is the purpose of having 2 different ways?
Any basic examples would be really great.
jQuery does not have :prev or :next selectors, I have no idea where you came across them. There is a :last selector, though, as well as :first, provided by the Sizzle selector library, used by jQuery. It is a non-standard selector, not part of CSS, and is thus implemented in JavaScript.
One purpose of the :last selector over the .last() method is so you can use it to filter elements in the middle of a selector sequence, like this (note that :last and :last-child are not the same):
$('.a > .b:last > .c')
Rather than having to write a chain of methods like this:
$('.a').children('.b').last().children('.c');
By the way, the "colon selectors" you refer to are called pseudo-classes (colloquially but incorrectly known as "pseudo-selectors").
Here is how I made a slider with all sorts of selectors and traversing of objects.
$('#next').click(function () {
if (!$('*').is(':animated')) {
if ($('div.display:visible').is(':nth-child(3)')) {
$('div.display:visible').fadeOut();
$('div.display:first').fadeIn(function () {
$(this).children().fadeIn();
});
} else {
$('div.display:visible').fadeOut().next().fadeIn(function () {
$(this).children().fadeIn();
});
}
}
});
$('#prev').click(function () {
if (!$('*').is(':animated')) {
if ($('div.display:visible').is(':nth-child(1)')) {
$('div.display:visible').fadeOut();
$('div.display:last').fadeIn(function () {
$(this).children().fadeIn();
});
} else {
$('div.display:visible').fadeOut().prev().fadeIn(function () {
$(this).children().fadeIn();
});
}
}
});
yes, they are in the documentation
sometimes you can't always include everything in the selector or want a subdivision of the selector.
e.g.
$(".mylist").each(function(){
$(this).css("color","red");
$(this).next().show();
})
The colon represents a filter like to get the selected option in a dropdown I would use $("select option:selected") or to get a checked radio box I would use $("input[type=radio]:checked");
There are no :prev and :next filters, but you can find a full list of filters here http://api.jquery.com/category/selectors/

I need a better jQuery selector to cut down on children() calls

Currently I am using
$('table').children('tfoot').children('tr').children('td');
to get the only td in the tfoot.
I dont like using .children() 3 times,
Is there a better way?
Edit
Slight correction
The selector is actually
var table = this;
$(table).children('tfoot').children('tr').children('td');
as this is inside a jquery plugin.
$('table > tfoot > tr > td')
children() searches in immediate children, so to replicate this, I used the direct descendant selector (>).
Update
From your update, you could do...
$(table).find(' > tfoot > tr > td')
or you could replace table with this.
I'm glad you are thinking of the children.
$('table>tfoot td');
You better to read about CSS-style selectors.
And for updated version:
$('tfoot>td',this);

Categories

Resources