Can't get next() after parent() in jquery - javascript

I'm trying to get the next element ('ul') after I traverse up and get a parent.
But I'm getting an error. "object doesn't support property or method next"
var p = $(e.target).parents()[1];
var c = p.next('ul');

Write
var c = $(p).next('ul');
re-blessing your element into a jQuery object. Btw do you really need to access the dom node instead of keeping it wrapped in the jquery object ? You can access the grandparent using parent().parent().

You probably need to just use .parent() if you're looking for the immediate parent. But if you really want the grandparent then use .eq(1) instead of [0], as this gives you a plain DOM element, without the benefit of jQuery methods.
//looking for the immediate parent?
var p = $(e.target).parent(); //or .parents().first()
var c = p.next('ul');
//looking for the grand parent?
var p = $(e.target).parents().eq(1);
var c = p.next('ul');

Related

Simple Example : Setting attributes by iterating

$(function(){
var els = [];
var m = $("#container");
m.attr({"style" : "width:50%;"});
$(".grid").each(function(e){
els.push(this);
});
var n = els[3];
n.attr({"style" : "width:50%;"}) //error
});
Hello, I am fairly new to DOM manipulating. I am wondering why the JQuery above returns [Object][Object] for var m, but returns [Object][HTMLDivElement] for var n.
Because of this behavior I cannot use statements such as n.attr(args).
TypeError: n.attr is not a function
Ultimately, I would like to store each .grid element in an array, and iterate over them, setting attributes as I go.
To be more exact, I have a 6x3 grid of div elements, and each time the page loads, they are given a random animation-duration because they are animated to fade in and out of view.
Why can I not use n.attr()?
That's because this inside the .each() loop is the actual DOM element, not the jQuery object. If you want the items in your array to be jQuery objects you need to wrap them in one yourself:
els.push($(this));
Alternatively, you can just wrap the DOM element at the time you are accessing it:
var n = $(els[3]);
From jQuery .each():
More importantly, the callback is fired in the context of the current
DOM element, so the keyword this refers to the element.
and
To access a jQuery object instead of the regular DOM element, use
$( this )
A DOM element is not a jQuery object. n is an array of DOM elements, not jQuery objects which have a DOM element as a property. You can achieve the same result using DOM methods without jQuery
onload = function() {
var m = document.getElementById("container");
m.style.width = "50%";
var els = document.querySelectorAll(".grid");
var n = els[3];
n.style.width = "50%";
}

Protractor - get child element of an element?

I am trying to access child element of an ng-repeat element but I am having troubles doing that.
I have searched around about the problem and the solutions that I have found did not work for me. One of those solutions was to do something like this:
var parent = element(by.repeater(''));
var child = parent.element(by.....);
When I try the child line I cant see the element function on the parent element..
http://prikachi.com/images/11/8338011u.png
If you see the screenshot above you will see the structure of the code of the page that I am trying to test.
I need to access the alt attribute of the image of the avatar and get its value (thats the Username of the User).
One thing that came to my mind is to use .getInnerHTML() on the ng-repeat row which will return a string with all that code. From there I can find the alt attribute and its value with string manipulation but this seems too brute and I am sure that there has to be a better way.
Simply I want to be able to get row 4 from the repeater and get the Username of the user at row 4, that's all I wanna do actually.
Try this,
var parent = element(by.repeater('f in feed'));
var child = parent.all(by.xpath('//img[#alt="Pundeep"]')).first()
(or)
var parent = element(by.repeater('f in feed'));
var child = parent.all(by.xpath('//img[#alt="Pundeep"]')).get(0)
You can get it directly using element.all() and get() locator in protractor. Here's how -
var child = element.all(by.repeater('parent_locator')).get(3); //gets 4th element in repeater. Its a 0 based index.
child.getAttribute('alt').then(function(user){
var username = user; //username contains the alt text
});
Hope this helps.
In Protractor element documentation it gives an example like this to find child elements, which is same as chaining element find:
// Chain 2 element calls.
let child = element(by.css('.parent')).
$('.child');
expect(child.getText()).toBe('Child text\n555-123-4567');
// Chain 3 element calls.
let triple = element(by.css('.parent')).
$('.child').
element(by.binding('person.phone'));
expect(triple.getText()).toBe('555-123-4567');
// Or using the shortcut $() notation instead of element(by.css()):
// Chain 2 element calls.
let child = $('.parent').$('.child');
expect(child.getText()).toBe('Child text\n555-123-4567');
// Chain 3 element calls.
let triple = $('.parent').$('.child').
element(by.binding('person.phone'));
expect(triple.getText()).toBe('555-123-4567');
https://www.protractortest.org/#/api?view=ElementFinder.prototype.$
this example could help :
return element(by.css('select.custom-select:nth-child(1) option[value="12"]'));
you can use nth-child() selector to access to a child element.
In my example i used a plugin with 2 select with same classes and i wanted to click on a defined option in the select 1, and a second in the select 2.

jQuery throws an error that element.find() is not a function

I have written a small JS to iterate through a set of matched elements and perform some task on each of them.
Here is the code:
var eachProduct = $(".item");
eachProduct.each(function(index, element){
var eachProductContent = element.find(".product-meta").clone();
});
When I console log element it outputs properly and the exact objects. Why should jquery throw this error?
because element is a dom element not a jQuery object
var eachProductContent = $(element).find(".product-meta").clone();
Inside the each() handler you will get the dom element reference as the second parameter, not a jQuery object reference. So if you want to access any jQuery methods on the element then you need to get the elements jQuery wrapper object.
You are calling .find() on a plain JS object, But that function belongs to Jquery object
var eachProductContent = $(element).find(".product-meta").clone();
You can convert it to a jquery object by wrapping it inside $(). And in order to avoid this kind of discrepancies you can simply use $(this) reference instead of using other.
Use $(this) for current Element
var eachProductContent = $(this).find(".product-meta").clone();
you should change "element" to "this":
var eachProduct = $(".item");
eachProduct.each(function(index, element){
var eachProductContent = $(this).find(".product-meta").clone();
});

How to get the grandparent of the grandparent of a div in html using jQuery

Is there a better way to get the parent of the parent of the parent... like 5 times?
So Instead of using this:
$(this).parent().parent().parent().parent().parent()
I could use something like this:
$(this).goBacktoNthParent(5);
Is it possible?
Using the :eq() selector
The :eq() selector allows you to target the element at the zero-based index of the set that was matched...
$(this).parents(':eq(4)')
Note: use parent(s) selector
Because the selector is zero based, we gave it one less than the number targeted.
DEMO: http://jsfiddle.net/pmMFv/
Using the .eq() method
The .eq() method is effectively the same as its selector counterpart, allowing you to target the element at the zero-based index of the set that was matched...
$(this).parents().eq(4)
Note: use parent(s) selector
DEMO: http://jsfiddle.net/pmMFv/2/
Using parentNode in a loop
For greatest performance, we could use the .parentNode property of the element, and run it in a loop, updating a variable with the newest parent each time...
var el = this, i = 5;
while(i-- && (el = el.parentNode));
$(el)
DEMO: http://jsfiddle.net/pmMFv/1/
You can easily create your own function:
function getNthParentOf(elem,i) {
while(i>0) {
elem = elem.parent();
i--;
}
return elem;
}
var something = getNthParentOf($(this),5);
You can use the .parents traversing function in conjunction with the :nth() selector.
So the result will be something like:
$(this).parents(':nth(5)'));
Notice: the :nth() index starts from 0 so for your case it should be:
$(this).parents(':nth(4)'));
If there are identifying markers on the parent element you want to get - such as an id or class you can use $(this).closest("#grandparentElement")
Hope, this would be of any help.
try using .parentsUntil()
working example: http://jsfiddle.net/ylokesh/wLhcA/
Well you can try
var parentControl = $('#yourcontrol').parent();
var grandParent = parentControl.parent();

Loop through children of current node in TinyMCE

Suppose I have a specific table selected in TinyMCE, like this:
var ed = tinyMCE.activeEditor;
var selection = ed.selection.getContent();
var element = ed.dom.getParent(ed.selection.getNode(), 'table');
How do I loop through the tr elements inside this?
I suspect one of these methods might be relevant, but I'm so new to classes, I'm having trouble understanding how to apply them:
TinyMCE select(): http://www.tinymce.com/wiki.php/API3:method.tinymce.dom.DOMUtils.select
TinyMCE getAll(): http://www.tinymce.com/wiki.php/API3:method.tinymce.html.Node.getAll
You may loop through any node in tinymce like a regular html node because they are in fact regular html nodes.
So this will suffice:
var ed = tinyMCE.activeEditor;
var element = ed.dom.getParent(ed.selection.getNode(), 'table');
var child = element.firstChild;
while(child){
if(child.nodeName.toLowerCase() == 'tr'){
//do your stuff here
}
child = child.nextSibling;
}
Doesn't var element has property childNodes? It's an array of immediate child elements. Each of those will further have properties, where you would be interested in nodeName. Make a recursive function to search (each node further has childNodes), until you find that nodeName=="TR".
BTW, this would be a lot easier with jQuery, if you're interested.
http://www.w3schools.com/htmldom/dom_methods.asp
http://www.w3schools.com/htmldom/dom_nodes_info.asp

Categories

Resources