Combine $(this) and $("li:eq(ui.item.index())") - javascript

With jQuery, how can i combine $(this) and $("li:eq(ui.item.index())") to something like $(this).$("li:eq(ui.item.index())").id ?
I'm trying to get the id attribute of a list element within a sortable list created with jQuery UI kit
$(".sections-list").sortable({ /* Update position of sortable elements */
start: function(event, ui) {
var start = ui.item.index();
var section = $("li:eq(start)").id;
alert(section);
}
});

Assuming what you're trying to do is find a specific indexed li item below this, you can do it like this:
$(this).find("li").eq(ui.item.index()).attr("id")

You can also pass this as a second argument to $(), indicating the context for your search:
$('li:eq('+start+')',this).attr('id')

If the elements you are trying to find are descendants of the $(this) object, then you can use jQuery's .find() function.
$(this).find("li:eq("+ui.item.index()+")").id
If the elements you are looking for are siblings of $(this) then you can use the .siblings() function to find them -
$(this).siblings("li:eq("+ui.item.index()+")").id
Reference -
find()
siblings()

$(this).find(selector);
The find selector takes your initial jquery and searches again within it.
Read more on it here: http://api.jquery.com/find/

Related

Remove element from jQuery selection

Let's say I have some sibling DOM elements that exist only within a jQuery selection:
var $container = $('<div></div><span></span>');
I want $div to only contain <div></div>, so I try to remove the <span>:
$container.find('span').remove();
// Note that span still exists:
console.log($div.length === 2);
What's the right way to solve this?
Your current selection is your <div> element. You need to find your span within there and call .remove() on that.
The parameter passed to .remove() does not find elements within the current collection, it filters it.
var $div = $('<div><span></span></div>');
$div.find('span').remove();
This doesn't modify the current selection so this isn't ideal, but I ended up finding a solution using .not():
$div = $div.not('span')

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.

Selecting all but the first child of parent with an ID and then applying action

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)

How to loop through all unchecked checkboxes?

Using jQuery, is there a fast way to loop through all unchecked checkboxes on a page that have className="carCheckboxes".
Use the .each() method with the :not(:checked) selector. Here are the references:
Reference to jQuery.each method
Reference to jQuery:not selector
Reference to jQuery:checked selector
$("input.carCheckboxes:not(:checked)").each (function () {
//your code to loop through each element.
//$(this) references the current element as a jQuery Object
});

JQuery: how to select parent table for parsing

I have JS function which parses through a table:
// id contains a message id, activeRow is "this" from onClick on tr
function doSomething ( id, activeRow ) {
// AJAX calling using id as parameter
$("#searchResultTable > tbody > tr").each(function(index) {
$(this).removeClass("bold");
});
}
This works perfectly fine (thanks to Ariel # other post), but I was thinking that there should be another possibility, like:
var table = $(activeRow).parent();
$("tbody > tr", table).each(function(index) {
// .. do something
});
// The above clearly doesn't work, but should document what I'm looking for.
This would allow the usage of the same table ID while the function would work on each of them separately.
Many, many thanks!
jQuery's parents() method makes getting the parent table a snap:
$(activeRow).parents('table')[0];
What about:
$(activeRow).siblings().andSelf().removeClass("bold")
That'll take the <tr> in activeRow, grab its sibling <tr>s too, and remove the "bold" class from all of them.
It may be better to use closest as follows:
$(activeRow).closest('table')[0];
From here: http://api.jquery.com/closest/
closest: Travels up the DOM tree until it finds a match for the supplied selector.
parents: Travels up the DOM tree to the document's root element, adding each ancestor element to a temporary collection; it then filters that collection based on a selector if one is supplied.
In this scenario it may well be that parents gets the top most table where there are more than one in the DOM tree, where as closest gets the one you are actually trying to work on.
Close, you would want to use a class on the table
$("table.className tbody tr").each(function() {
// .. do something
});

Categories

Resources