Alternative to jQuery's .last - javascript

I need to use the 1.3.2 library which unfortunately does not support the last functionality. This causes my function to fail:
$op.last().next().after($op);
"$op.last is not a function"
Demo:
http://jsfiddle.net/uscyH/
I have been unsuccessful at rewriting this functionality in pure js, any suggestions? Note, I will also need the .first(), but I'm assuming I will be able to extrapolate that from the .last alternate code. Many thanks-

You can use the :last selector, which existed since 1.0:
$op.filter(':last')

To get the last element, do this:
$op.slice( -1 )
Live demo: http://jsfiddle.net/uscyH/4/
The jQuery .slice() method is patterned after the JavaScript .slice()
method for arrays. One of the features that it mimics is the ability
for negative numbers to be passed as either the start or end
parameter. If a negative number is provided, this indicates a position
starting from the end of the set, rather than the beginning.
Source: http://api.jquery.com/slice/
To get the first element do this:
$op.eq( 0 )
Live demo: http://jsfiddle.net/uscyH/5/

Assuming $op is the collection of options, get the first DOM element in the collection using:
var first = $op[0];
and the last using:
var last = $op[$op.length-1];

It looks like you could find the last or first item with this method
http://jsfiddle.net/uscyH/3/
alert("Last is: "+$("option:last").html()+" and first is: "+$("option:first").html());​
Update: Looks like you have lots of ideas to choose from now. Feel free to use whatever approach you would like. This approach is probably not the fastest one since it is doing two DOM queries instead of operating on the list you already appear to have stored in an array. It's nice to see how jQuery has been so powerful even back in these versions. Thanks for the ideas everyone!

$($op[$op.length-1]).next().after($op);
You can also choose to extend jquery and create your own last method.

Related

Custom commands for selecting a check box in cypress

I have written a custom command for selecting the checkbox based upon the contact name what i provide(Refer the image ) for example I provide Test10 Test10, it does not get selected, However the test case gets passed without selecting, I tried debugging cname variable is empty attaching the debugger screen shot as well
Cypress.Commands.add("SelecttheContact", (contactName) => {
cy.get('tr td:nth-child(2)').each(($el, index, $list) => {
const cname=$el.find(contactName).text()
if(cname.includes(contactName))
{
// cy.get("tr td:nth-child(1)").eq(index).click()
// cy.get("input[type='checkbox']").eq(index).click()
debugger
$e1.find('checkbox').click()
}
}) })
I may be wrong here, but it looks like you are relying on jquery to do the selection work instead of Cypress. I would have used Cypress selection to find the checkbox.
Did you know about the Cypress Selector Playground?
The Selector Playground is an interactive feature that helps you:
Determine a unique selector for an element.
See what elements match a given selector.
See what element matches a string of text.
https://docs.cypress.io/guides/core-concepts/test-runner.html#Selector-Playground
There is also an API option to change the priorities of the selector
The Selector Playground exposes APIs that enable you to:
Change the default selector strategy
Override the selectors that are returned per element
https://docs.cypress.io/api/cypress-api/selector-playground-api.html#Syntax
.find() accepts a selector, according to the docu: https://api.jquery.com/find/
So passing a text content will not work.
text() returns an empty string because if a selector is not found in JQuery you always get an object. And functions called onto that object will return default values I think.
Why the tests passes can not be determined from what we see :-)
I suggest you to adjust the selector for your checkbox.
Btw I am not sure, if you can call cy.get() within each() (the line you have commented out in your code).
Currently I am not at my Laptop, so I can not provide an example for clicking a checkbox. But please try to fix the selector and if it does not work, I can try it for myself.

Identity selectors in jQuery returning arrays

Suppose I have a div tag like this:
<div id="group-dialog" class="modal-dialog">
Now I want to grab it as a jQuery object (in this case so I can run .dialog()).
When I try this:
var gDialog = $('#group-dialog');
I get an array back (!!).
Why am I getting an array? Isn't the point of having an ID attribute that there's only one? I can see getting multiple p's or .my-css-thing back ...
Next question:
I have this array with 1 object in it that I now want to access as a jQuery object.
When I do this:
$(gDialog[0])
And pull it up in F12, I still have an array!! I thought I de-referenced the array already by picking the first element.
This doesn't seem to help either:
var gDialog = $('#group-dialog:first');
This is basic, but I run into this problem a lot. It seems like it used to be a lot simpler!
What is the best way to access this DOM element as a jQuery object?
Answer 1
jQuery selectors always return arrays.
Selection with id attribute is a particular use case and ideally the result should be unique. However, there is nothing preventing you from having duplicated ids in a HTML document (although this is bad practice).
Answer 2
The following code will get you the first element as a DOM object:
var gDialog = $('#group-dialog')[0];
Note: you may want to check the size of the return array first.
As far as I know, there is no way to transform this DOM element back to a jQuery object. The standard use case would be to directly used $('#group-dialog') and asume that it is found and unique.
Try using .get(). Though I'm not sure it will work with dialog()
Retrieve the DOM elements matched by the jQuery object.
var gDialog = $('#group-dialog').get();
If you're trying to grab it to use it on a dialog, you can just put
$(document).ready(function(){
$('#group-dialog').dialog({put options here})
});

JQuery Isotope number filter

I've been playing around with the isotope plugin and I think it's great!
However, it's only keyword based. What If I want to do some math filtering like adding a class: .age-35. Then, in my filter I want to select for example age > 30.
Is something like this possible or isn't this what isotope is designed for?
I've been trying to find some fiddles on the use of 'number filtering' but I can't find anything.
The sort methods just need to return a number for each supplied element. It is called once for each element that needs sorting (i.e. the visible ones). What number it returns is up to your imagination.
e.g. You can extract attribute values from any part of the element (class, data-???, etc) and parse them into a number then return the number.

jPicker change color transparent + get object

I'm using jPicker,I have 2 Questions.
1.How can I change the color to the transparent one? Already tried using
$.jPicker.List[0].color.acive.val('hex','FFFFFF',this)
-> Found this , not sure if the best solution
$.jPicker.List[0].color.acive.val('ahex','00000000',this)
2.Other is how can access without using the "index", like a selector.
For example something like:
$('selector').color.active.val('hex','FFFFFF',this) -> just an idea
this is Chris Tillman, and I kinda (completely) wrote the plugin you're using. To accomplish the first question, just run
$.jPicker.List[0].color.active.val('a', 0, this);
That will set just the alpha value for the active color.
If you want to get to the DOM element without using the List, just set it equal to a variable at instantiation like so.
var MyPicker = $('selector').jPicker()[0];
Just remember the index location at the end as the jPicker ALWAYS returns the result of $('selector').each(). If you are using one selector call for three different pickers, you can forget the index call at the end and get to each on using MyPicker[0], MyPicker[1], MyPicker[2] ... The $.jPicker.List[] is a master collection list for ALL instances of the picker, where this solution will ONLY index the pickers created by that individual call.
This method is a bit more complicated but you can check this answer to get the actuall ID
https://stackoverflow.com/a/27445752/2307326

getElementById and JQuery not returning same result

I'm not getting the same result when I use JQuery vs javascript functions.
This is the HTML
<form id="testform">
<div id="FormContainerID"></div>
<input type="button" id="y" value="Button" />
<div id="ListContainerID"></div>
</form>
Here is the Javascript
01 var Form = document.getElementById('y').form;
02 //var Form = $('#y').closest('form');
03 alert(Form);
When Activating row 1, I get a legal form object. The Alert says "object HTMLFormElement" and everything works fine.
But if I use row 02 instead, Alert says "object Object" and then I ofcourse get errors becaus it isn't a real Form object.
Why is JQuery not returning the correct Object?
I get the same result with Chrome and IE8.
[EDIT]
I'm using JQuery version: jquery-1.5.1.min
[SOLUTION]
Thank you for clearing this up. I Changed the code to:
var Form = $('#'+fChildID).closest('form')[0];
...and now it works as a charm.
Vivek Goel was the first to answer, so creds to him. I voted up you other guys that explained the JQuery instance model.
Thank you.
jQuery returns a jQuery instance when you use it to look things up, not the raw DOM element. The jQuery instance is a wrapper around the set of matched elements, and allows you to apply set-based operations to the elements. This is one of the absolute fundamentals of using jQuery.
You can also access the raw elements if you like using array-like notation — [0], [1], etc., up to .length - 1. So in your case, since you're getting just one element, it would be Form[0]. If your code matched multiple form elements, it would be Form[1] for the second one, Form[2] for the third one, etc. (Using the [] notation is surprisingly hard to find in the documentation, though, one of the gaps in my view; in the old days you used the get method, but you only need that now if you're using its special handling for negative indexes.)
You frequently don't need to access the raw elements at all. You haven't said what you're going to do with the form once you have it, but if you were to (say) submit it, just call the submit function on the jQuery instance, and it will submit the form. If you wanted to get an attribute from it, there's the attr jQuery function (so for instance, val = Form.attr("action")).
jQuery is very set-based, but it's assymetrical, which feels weird at first but works fairly well in practice. When getting a value, functions usually get the value from the first matched element only. When setting a value, functions usually set it on all the matched elements.
This is because the jquery statement is returning a jquery object and not a form object.
You need something like Form[0] to access the form element.
with jquery use
alert(Form[0]);
http://jsfiddle.net/dvCtr/
Try
var form = $("#y").parent
this should return the parent of yin the DOM tree

Categories