I referred so many references, but not getting any responses. Thats y i came here to develop my code through yours.
Have to append the element with the text on click. It works and appends inside the ul element as li element with text. But i want to disable or stop the child event. Since i wrote the onclick on parent element only. It should not be click able on the child element. Please help on this.
Sharing the url :
https://stackblitz.com/edit/angular-hostbinding-decorator
I have studied your code and found the problem. The ul is the parent element and must be referenced by abcd and the click handler on first li that is responsible for adding child receives the event.
<div hostbinding color="white">{{name}}</div>
<h1>Hello {{thingTwo}}</h1>
<ul #abcd>
<li (click) = "dasdas($event)" >Click here to add li</li>
</ul>
so since I started studying JavaScript I've been reading this book called Learning JavaScript by Tim Wright.
In this book I found a chapter about how we can move and target elements in the DOM tree and one of them is making use of properties which target siblings, while doing the exercises in the book I simply could not make the following statement work:
<ul id="nav">
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
<script>
//Should add "next" class attribute to the "Contact Us" li tag.
document.getElementById("about").parentNode.nextSibling.setAttribute("class", "next");
</script>
After having a quick look at this code I was wondering if any of you more experienced developers could help me and explain me why this doesn't work properly. I feel confused because I can't know whether I'm doing something wrong or the article about these properties is misspelled.
Anyway thanks for your time and help in advance!
Cheers!
cs.almeida
nextSibling selects the very next sibling of the element. The very next sibling node can also be a textNode that doesn't have setAttribute method, i.e. what your code tries to do is adding a class to the next sibling textNode. If you remove the line break and other hidden characters between the 2 li elements then you code will work as expected.
Another option is using the nextElementSibling property instead of the nextSibling, which will select the next sibling node that has nodeType of 1, i.e. the next HTMLElement sibling of the element.
document.getElementById("about")
.parentNode
.nextElementSibling
.classList // https://developer.mozilla.org/en-US/docs/Web/API/Element/classList
.add("next");
I have following structure
<ul id="tabs" class="nav nav-tabs">
<li>AAA</li>
<li>BBB</li>
<li>CCC</li>
<li>DDD</li>
</ul>
Now I am operating on the anchor tag by following code and which is working fine.
$('#tabs a[href="#ddd"]').tab('show');
I am using pycharm which adds warning for the line by saying "Preface with ID selector". When I click it, pycharm changes to following
$('#tabs').find('a[href="#ddd"]').tab('show');
Both are working fine but I don't understand the difference.
What is the difference in both or more specifically what is difference between $('#tabs a[href="#ddd"]') and $('#tabs').find('a[href="#ddd"]')?
$("#tabs a") evaluates from right to left - which is the native direction of both Sizzle selector engine and querySelectorAll - i.e. first it finds all of the anchor elements in the page and then narrows it down to those under #tabs.
$("#tabs").find("a") evaluates - more intuitively - from left to right, i.e. first it finds #tabs, and then only the anchor elements under it.
Clearly the latter would yield better performance, but it would only be noticeable accumulatively; that is, if you run thousands of queries. Otherwise, the difference is negligible.
As stated in "Increase Specificity from Left to Right":
A little knowledge of jQuery’s selector engine is useful. It works
from the last selector first so, in older browsers, a query such as:
$("p#intro em");
loads every em element into an array. It then works up the parents of
each node and rejects those where p#intro cannot be found. The query
will be particularly inefficient if you have hundreds of em tags on
the page.
Depending on your document, the query can be optimized by retrieving
the best-qualified selector first. It can then be used as a starting
point for child selectors, e.g.
$("em", $("p#intro")); // or
$("p#intro").find("em");
But Test case says $("#tabs > a") would be fastest
The second one is MUCH quicker.
The reason being jQuery's selector enginge Sizzle, which traverses the selection from right to left, not vice versa.
This means that the selector
$('#tabs a[href="#ddd"]')
First queries the DOM document for a tag, which contains the attribute href set to #ddd. It then filteres out all of them, to get every one that is a <a> tag. At last, it traverses up the DOM tree for every node, trying to find a parent #tabs.
Imagine a site with 1.000 tags with href="#ddd", how tremendously slow that would be.
THEN.
The other variation pycharm suggest, is to first locate a element #tabs. This is super-quick, since jQuery can utilize the native browser method getElementById(). Having this node, it can traverse down to find all tags that are matching. By doing this, not all tags in the whole DOM-tree, needs to be checked. Only those which actually are in #tabs.
For further information, please check out this page in the documentation.
The effect is the same: Find anchors that have the value #ddd as href and are a descendant of #tabs. The difference lies in the way to achieve this.
The first solution finds the anchors and then checks if they are a descendant of #tabs.
The second solution finds #tabs and then finds the anchors. Which should be faster, of course.
.find() is better performance wise as compared to your first selector
$('#tabs a[href="#ddd"]').tab('show');
, that is why pycharm changes it to the selector using .find()
$('#tabs').find('a[href="#ddd"]').tab('show');
http://vaughnroyko.com/the-real-scoop-on-jquery-find-performance/
The difference is that find() allows you to filter on a set of elements based on a selection you've already made, returning and array of elements if that's the case.
$('#tabs').find('a[href=“#ddd”]');
And it's a more specific way of searching for an element because you are saying "hey, go to #tabs and find me all a[href=“#ddd”] in there" instead of you saying "hey, find me all this guys $('#tabs a[href=“#ddd”]') in all the code that i have."
While, in most cases, the performance is the only difference, the difference in approach can also affect the outcome of your code, depending on what selectors you are using.
For example, $("table").find("tr:even").addClass("even"); will add the "even" class to the every other row in each individual table that gets returned. So, if the "even" class makes the text in the rows bold and you have two tables, each with 3 rows, you would get the following result:
this is table one, row 1
this is table one, row 2
this is table one, row 3
this is table two, row 1
this is table two, row 2
this is table two, row 3
In both cases, the 1st and 3rd row of each table (i.e., the "even" rows . . . don't get me started on JQuery's even filter, selecting the odd rows . . .) are bolded.
On the other hand, $("table tr:even").addClass("even"); will add the "even" class to every other row in the entire group of rows from all tables combined.
this is table one, row 1
this is table one, row 2
this is table one, row 3
this is table two, row 1
this is table two, row 2
this is table two, row 3
In this situation, the the 1st and 3rd row of second table are actually the 4th and 6th rows of the entire group of <tr> elements, so they are treated as "odd". The 2nd row of the second table, however, is the 5th row of the entire collection and, thus, is treated as "even" and is bolded.
Greetings,
I would like to toggle a huge multi-level ul with mootools 1.1 or plain javascript.
The list looks like:
HTML:
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
<li>
<ul>
<li>ddd
<ul>
<li>fff</li>
<li>ggg</li>
</ul>
</li>
<li>eee</li>
</ul>
</li>
</ul>
What I would like to do initially is to show the first level expanded, and the other levels collapsed and when each of the list items is clicked, to expand the ul below it.
Is it possible to do it without (greatly) modifying the html above?
From the documentation, I see that Fx.Slide is the most appropriate, however it accepts the id of the element as a parameter, which means I have to assign id's to each list item.
Is there a way by using selectors of collections of elements starting from the top?
I'm not sure whay I'll say apply with the very old 1.1 version. However, at least since 1.2, the element you need to pass is either the ID (like you said), either the actual element.
If you can use another version than 1.1, try the 1.3 which makes it easier to select the elements you want.
Here, I believe you need every <ul> element which has a direct <li> as parent. MooTools 1.3 features this new selector engine Slick, which would accomplish it fairly easilly: ul !> li.
However, I'm not sure (I didn't success) that the direct child selectors works properly with 1.1.
Here is what I came up with: http://jsfiddle.net/rCfwq/
I am searching for a way how I could select a div element which is not the direct next one to the one which is "selected" by a click function.
<div id="click">(siblings)</div><div>text</div><div id="get this one"></div>
Now I would like to select the one with the id "get this one" - in my code this id is not available. All the divs have the same class and do have siblings.
I could select the third one by $(this).next().next() but I think it's not the best way to do it.
Also there can be divs before the one which is clicked - so it's not necessarily the first one.
I tried the :nth-child selector but didn't find a solution.
Later I also may want to select the 13th one after the click one (or the 23th, 65th and so on). This means I would like to have a rather dynamic solution to this problem.
Thanks for your help,
Phil
You can use .nextAll() with .eq() for your dynamic approach, like this:
$(this).nextAll().eq(1) //0 based index, this would be .next().next()
This would allow you to get n siblings forward, which seems to be what you're after.
It seems that $(this).parent().find('div').eq(2).attr('id') should work.
UPDATE( Added find('div') )