I'm still struggling with this question.
Add an Event Handler to the li element and console.log() the name of the shirt they selected. Use JavaScript
<h3>Shirts</h3>
<ul id='list'>
<li>Biker Jacket</li>
<li>Mens Shirt</li>
</ul>
If i get your question right, use jQuery:
$('li').click(function() {
console.log($(this).text());
});
It looks like this is a homework question. And that you are new to StackOverflow.
On StackOverflow you should always write pieces of code that you have attempted.
Anyways, because you are new... I can show you 2 ways of accomplishing this.
Please note that I am not so good in vanilla Javascript aswell. So
there is probably a better way to accomplish what you're trying.
1) Inline Event Handler
You can add inline event handlers directly to the HTML, like this:
<h3>Shirts</h3>
<ul id='list'>
<li onclick='console.log(this.innerText)'>Biker Jacket</li>
<li onclick='console.log(this.innerText)'>Mens Shirt</li>
</ul>
2) Non-inline Event Handler
The difference here is that you need to refer to the exact elements you want to add an Event Listener to. The benefit of doing this, is that you don't have to add an Event Listener manually to each list element. So the HTML stays clean.
var list = document.getElementById("list"); // select the parent element
var items = list.getElementsByTagName("li"); // select all <li> items in this parent element
for (var i = 0; i < items.length; i++) { // loop through all items
items[i].addEventListener("click", function() { // add the click event listener to the item
console.log(this.innerText); // console.log() the item's text.
});
}
Also read the following MDN documentations to learn about the used functions:
getElementById
getElementByTagName
Loops and iterations
innerText
Happy learning!
This question already has answers here:
jQuery: find() children until a certain threshold element is encountered
(5 answers)
Closed 16 days ago.
TL;DR: How do I get an action like find(), but block traversal (not full stop, just skip) for a certain selector?
ANSWERS: $(Any).find(Selector).not( $(Any).find(Mask).find(Selector) )
There were many truly great answers, I wish I could some how distribute the bounty points more, maybe I should make some 50 pt bounties in response to some of these ;p I choose Karl-André Gagnon's because this answer managed to make findExclude unrequired in one, slightly long, line. While this uses three find calls and a heavy not filter, in most situations jQuery can use very fast implementation that skips traversal for most find()s.
Especially good answers are listed below:
falsarella: Good improvement on my solution, findExclude(), best in many situatoins
Zbyszek: A filter-based solution similar to falsarella's, also good on efficiency
Justin: A completely different, but manageable and functional solution to the underlaying issues
Each of these have their own unique merits and and are deserving of some mention.
I need to descend into an element fully and compare selectors, returning all matched selectors as an array, but skip descending into the tree when another selector is encountered.
Edit: replacing original code sample with some from my site
This is for a message forum which may have reply message-groups nested inside any message.
Notice, however, we cannot use the message or content classes because the script is also used for other components outside of the forum. Only InterfaceGroup, Interface and controls classes are potentially useful - and preferably just Interface and controls.
Interact with the code and see it in JS Fiddle, thanks Dave A, here Click on the buttons while viewing a JavaScript console to see that the controls class is being bound to one extra time per level of .Interface nesting.
Visual A, Forum Layout Struture:
<li class="InterfaceGroup">
<ul class="Interface Message" data-role="MessagePost" >
<li class="instance"> ... condensed ... </li>
<li class="InterfaceGroup"> ... condensed ...</li>
</ul>
<ul class="Interface Message" data-role="MessagePost" >
<li class="instance"> ... condensed ... </li>
</ul>
<ul class="Interface Message" data-role="MessagePost" >
<li class="instance"> ... condensed ... </li>
<li class="InterfaceGroup"> ... condensed ...</li>
</ul>
</li>
Inside of each <li class="InterfaceGroup"> there could be any number of repetitions of the same structure (each group is a thread of messages) and/or deeper nesting such as..
<li class="InterfaceGroup">
<ul class="Interface Message" data-role="MessagePost" >
<li class="instance"> ... condensed ... </li>
<li class="InterfaceGroup">
<ul class="Interface Message" data-role="MessagePost" >
<li class="instance"> ... condensed ... </li>
<li class="InterfaceGroup"> ... condensed ...</li>
</ul>
</li>
</ul>
</li>
Inside of each <li class="instance"> ... </li> there are arbitrary places decided by another team where class="controls" may appear and an event listener should be bound. Though these contain messages, other components structure their markup arbitrarily but will always have .controls inside of .Interface, which are collected into an .InterfaceGroup.A reduced-complexity version of the inner-content (for forum posts) is below for reference.
Visual B, Message Contents with controls class:
<ul class="Interface Message" data-role="MessagePost" >
<li class="instance">
<ul class="profile"> ...condensed, nothing clickable...</ul>
<ul class="contents">
<li class="heading"><h3>Hi there!</h3></li>
<li class="body"><article>TEST Message here</article></li>
<li class="vote controls">
<button class="up" data-role="VoteUp" ><i class="fa fa-caret-up"> </i><br/>1</button>
<button class="down" data-role="VoteDown" >0<br/><i class="fa fa-caret-down"> </i></button>
</li>
<li class="social controls">
<button class="reply-btn" data-role="ReplyButton" >Reply</button>
</li>
</ul>
</li>
<li class="InterfaceGroup" > <!-- NESTING OCCURRED -->
<ul class="Interface Message" data-role="MessagePost" >
<li class="instance">... condensed ... </li>
<li class="InterfaceGroup" >... condensed ... </li>
</ul>
</li>
</ul>
We can only bind to controls that are within an Interface class, instance may or may not exist but Interface will. Events bubble to .controls elements and have a reference to the .Interface which holds them..
So I am trying to $('.Interface').each( bind to any .controls not inside a deeper .Interface )
That's the tricky part, because
.Interface .controls will select the same .control multiple times in the .each()
.not('.Interface .Interface .controls') cancels out controls in any deeper nesting
How can I do this using jQuery.find() or a similar jQuery method for this?
I have been considering that, perhaps, using children with a not selector could work and could be doing the same thing as find under the hood, but I'm not so sure that it actually is or wont cause horrible performance. Still, an answer recursing .children effectively is acceptable.
UPDATE: Originally I tried to use a psuedo-example for brevity, but hopefully seeing a forum structure will help clarify the issue since they're naturally nested structures. Below I'm also posting partial javascript for reference, line two of the init function is most important.
Reduced JavaScript partial:
var Interface=function()
{
$elf=this;
$elf.call=
{
init:function(Markup)
{
$elf.Interface = Markup;
$elf.Controls = $(Markup).find('.controls').not('.Interface .controls');
$elf.Controls.on('click mouseenter mouseleave', function(event){ $elf.call.events(event); });
return $elf;
},
events:function(e)
{
var classlist = e.target.className.split(/\s+/), c=0, L=0;
var role = $(e.target).data('role');
if(e.type == 'click')
{
CurrentControl=$(e.target).closest('[data-role]')[0];
role = $(CurrentControl).data('role');
switch(role)
{
case 'ReplyButton':console.log('Reply clicked'); break;
case 'VoteUp':console.log('Up vote clicked'); break;
case 'VoteDown':console.log('Down vote clicked'); break;
default: break;
}
}
}
}
};
$(document).ready( function()
{
$('.Interface').each(function(instance, Markup)
{
Markup.Interface=new Interface().call.init(Markup);
});
} );
If you want to exclude element in you find, you can use a not filter. As for example, I've taken you function that exclude element and made it way shorter :
$.fn.findExclude = function( Selector, Mask,){
return this.find(Selector).not(this.find(Mask).find(Selector))
}
Now, ill be honest with you, I did not fully understand what you want. But, when i took a look at your function, I saw what you were trying to do.
Anyway, take a look at this fiddle, the result is the same as your : http://jsfiddle.net/KX65p/8/
Well, I really don't want to be answering my own question on a bounty, so if anyone can provide a better or alternative implementation please do..
However, being pressed to complete the project, I ended up working on this quite a bit and came up with a fairly clean jQuery plugin for doing a jQuery.find() style search while excluding child branches from the results as you go.
Usage to work with sets of elements inside nested views:
// Will not look in nested ul's for inputs
$('ul').findExclude('input','ul');
// Will look in nested ul's for inputs unless it runs into class="potato"
$('ul').findExclude('input','.potato');
More complex example found at http://jsfiddle.net/KX65p/3/ where I use this to .each() a nested class and bind elements which occur in each nested view to a class. This let me make components server-side and client-side reflect each other's properties and have cheaper nested event handling.
Implementation:
// Find-like method which masks any descendant
// branches matching the Mask argument.
$.fn.findExclude = function( Selector, Mask, result){
// Default result to an empty jQuery object if not provided
result = typeof result !== 'undefined' ?
result :
new jQuery();
// Iterate through all children, except those match Mask
this.children().each(function(){
thisObject = jQuery( this );
if( thisObject.is( Selector ) )
result.push( this );
// Recursively seek children without Mask
if( !thisObject.is( Mask ) )
thisObject.findExclude( Selector, Mask, result );
});
return result;
}
(Condensed Version):
$.fn.findExclude = function( selector, mask, result )
{
result = typeof result !== 'undefined' ? result : new jQuery();
this.children().each( function(){
thisObject = jQuery( this );
if( thisObject.is( selector ) )
result.push( this );
if( !thisObject.is( mask ) )
thisObject.findExclude( selector, mask, result );
});
return result;
}
Maybe something like this would work:
$.fn.findExclude = function (Selector, Mask) {
var result = new jQuery();
$(this).each(function () {
var $selected = $(this);
$selected.find(Selector).filter(function (index) {
var $closest = $(this).closest(Mask);
return $closest.length == 0 || $closest[0] == $selected[0] || $.contains($closest, $selected);
}).each(function () {
result.push(this);
});
});
return result;
}
http://jsfiddle.net/JCA23/
Chooses those elements that are either not in mask parent or their closest mask parent is same as root or their closest mask parent is a parent of root.
I think that this is the closest the findExclude can be optimized:
$.fn.findExclude = function (Selector, Mask) {
var result = $([]);
$(this).each(function (Idx, Elem) {
$(Elem).find(Selector).each(function (Idx2, Elem2) {
if ($(Elem2).closest(Mask)[0] == Elem) {
result = result.add(Elem2);
}
});
});
return result;
}
Also, see its fiddle with added logs with ellapsed time in milliseconds.
I see that you are worried with the performances. So, I've run some tests, and this implementation takes no longer than 2 milliseconds, while your implementation (as the answer you have posted) sometimes takes around 4~7 millisecods.
From my understanding, I would bind to the .controls elements and allow the event to bubble up to them. From that, you can get the closest .Interface to get the parent, if needed. This way you are added multiple handlers to the same elements as you go further down the rabbit hole.
While I saw you mention it, I never saw it implemented.
//Attach the event to the controls to minimize amount of binded events
$('.controls').on('click mouseenter mouseleave', function (event) {
var target = $(event.target),
targetInterface = target.closest('.Interface'),
role = target.data('role');
if (event.type == 'click') {
if (role) {
switch (role) {
case 'ReplyButton':
console.log('Reply clicked');
break;
case 'VoteUp':
console.log('Up vote clicked');
break;
case 'VoteDown':
console.log('Down vote clicked');
break;
default:
break;
}
}
}
});
Here is a fiddle showing what I mean. I did remove your js in favor of a simplified display.
It does seem that my solution may be a over simplification though...
Update 2
So here is a fiddle that defines some common functions that will help achieve what you are looking for...I think. The getInterfaces provides a simplified function to find the interfaces and their controls, assuming all interfaces always have controls.
There are probably fringe cases that will creep up though. I also feel I need to apologize if you have already ventured down this path and I'm just not seeing/understanding!
Update 3
Ok, ok. I think I understand what you want. You want to get the unique interfaces and have a collection of controls that belong to it, that make sense now.
Using this fiddle as the example, we select both the .Interface and the .Interface .controls.
var interfacesAndControls = $('.Interface, .Interface .controls');
This way we have a neat collection of the interfaces and the controls that belong to them in order they appear in the DOM. With this we can loop through the collection and check to see if the current element has the .Interface associated with it. We can also keep a reference to the current interface object we create for it so we can add the controls later.
if (el.hasClass('Interface')){
currentInterface = new app.Interface(el, [], eventCallback);
interfaces.push(currentInterface);
//We don't need to do anything further with the interface
return;
};
Now when we don't have the .Interface class associate with the element, we got controls. So let's first modify our Interface object to support adding controls and binding events to the controls as they are being added to the collection.
//The init function was removed and the call to it
self.addControls = function(el){
//Use the mouseover and mouseout events so event bubbling occurs
el.on('click mouseover mouseout', self.eventCallback)
self.controls.push(el);
}
Now all we have to do is add the control to the current interfaces controls.
currentInterface.addControls(el);
After all that, you should get an array of 3 objects (interfaces), that have an array of 2 controls each.
Hopefully, THAT has everything you are looking for!
If I understand you:
understanding your needs better and applying the specific classes you need, I think this is the syntax will work:
var targetsOfTopGroups = $('.InterfaceGroup .Interface:not(.Interface .Interface):not(.Interface .InterfaceGroup)')
This Fiddle is an attempt to reproduce your scenario. Feel free to play around with it.
I think I found the problem. You were not including the buttons in your not selector
I changed the binding to be
var Controls = $('.InterfaceGroup .Interface :button:not(.Interface .Interface :button):not(.Interface .InterfaceGroup :button)');
Fiddle
Why not taking the problem upside down?
Select all $(.target) elements and then discard them from further treatment if their .$parents(.group) is empty, that would give sonething like:
$('.target').each(function(){
if (! $(this).parents('.group').length){
//the jqueryElem is empy, do or do not
} else {
//not empty do what you wanted to do
}
});
Note that don't answer the title but literally gives you "Selector B, inside of a result from Selector A"
If your .interface classes had some kind of identifier this would seem to be rather easy.
Perhabs you already have such an identifier for other reasons or choose to include one.
http://jsfiddle.net/Dc4dz/
<div class="interface" name="a">
<div class="control">control</div>
<div class="branch">
<div class="control">control</div>
<div class="interface">
<div class="branch">
<div class="control">control</div>
</div>
</div>
</div>
<div class="interface" name="c">
<div class="branch">
<div class="control">control</div>
</div>
</div> </div>
$( ".interface[name=c] .control:not(.interface[name=c] .interface .control)" ).css( "background-color", "red" );
$( ".interface[name=a] .control:not(.interface[name=a] .interface .control)" ).css( "background-color", "green" );
Edit: And now Im wondering if you're tackling this problem from the wrong angle.
So I am trying to $('.Interface').each( bind to any .controls not
inside a deeper .Interface )
http://jsfiddle.net/Dc4dz/1/
$(".interface").on("click", ".control", function (event) {
alert($(this).text());
event.stopPropagation();
});
The event would be triggered on a .control; it would then bubble up to its .closest( ".interface" ) where it would be processed and further propagation be stopped. Isn't that what you described?
I made a table out of a simple list structure:
<html>
<body>
<ul id="Column:0">
<li id="Row:0></li>
<li id="Row:1></li>
<li id="Row:2></li>
<li id="Row:3></li>
<li id="Row:4></li>
</ul>
<ul id="Column:1">
<li id="Row:0></li>
<li id="Row:1></li>
<li id="Row:2></li>
<li id="Row:3></li>
<li id="Row:4></li>
</ul>
<ul id="Column:2">
<li id="Row:0></li>
<li id="Row:1></li>
<li id="Row:2></li>
<li id="Row:3></li>
<li id="Row:4></li>
</ul>
</body>
</html>
Now I want to add a simple .mouseover() to every row, for e.g. changing the color of a row, when hovered. And this is what I figured out, so far:
for (var i = 2; i <= _totalRows; i++) {
var row = $('#TimeTable ul li:nth-child(' + i + ')')
row.each(function() {
$(this).click(function(evt) {
var $target = $(evt.target);
console.log($target.nodeName)
if (evt.target.nodeName == 'DIV') {
console.log(evt.parent('li'));
}
}); //end $(this).click(fn)
}); // end each(fn)
}
I get a set of all <li> objects matching to :nth-child(i) where i is the rows number.
var row = $('#TimeTable ul li:nth-child(' + i + ')')
Now I just iter this set through to add a .click(fn) to every <li>.
This works fine. Every cell has it's .click(fn) attached to it.
But the following, what to do on a click, is where I'm stuck for several hours now:
var $target = $(evt.target);
console.log($target.nodeName)
if (evt.target.nodeName == 'DIV') {
console.log(evt.parent('li'));
}
I simply don't get it to run.
You can actually ignore this gibberish, as it's just the last of several things I already tried here.
What I'm trying to do is simply select every <li> with an id='Row:X' and manipulate its CSS. The best I yet had was, that I can click a cell, but no matter in what row this cell is, the last one gets colored. I remember having used i as the row-index, when that happened, so I might miss some understanding of event-handling here, too.
Use a class name for duplicate groups of elements not an ID. If you give row one a class of "Row1" the selector is simply:
$('.Row1')
Then:
$('#TimeTable li').removeClass('highlight');
$('.Row1').addClass('highlight');
If you just wish to change the color on mouseover:
$('#TimeTable ul li').mouseover(function(){
$(this).css('background','red');
});
$('#TimeTable ul li').mouseout(function(){
$(this).css('background','green');
});
Make your ID's like so: C1R1 (Column1Row1) and so on
JQuery read/google up "jquery each"
JQuery read/google up "jquery bind click"
JQuery read/google up "jquery attr" and "JQuery val()"
This will give you the knowledge to write your own and most importantly understand it better. You will want to achieve the following (your close but no for loop required):
A list which JQuery attaches a click event handler to each LI, and then when the click happens the ID can be retrieved.
PS. There's a time and place for tables, they 9/10 times nearly always better for displaying data than CSS is. If you have a complex multi column row and want fiexed hights and no JS to fix things or do anything smart you can have a table and css :Hover on TR for stying mouse over and out etc. Heights are also constant.
PS. PS. If your data is dynamic and coming from a database and the whole row is an ID from the database I tend to avoid using the html ID attribute for this and make my own. You can retrieve this via attr("myattribute");
NOTE ON CSS and IDS:
Standard practice for ID's are to be used once on a page.
Class for repeatable content
Good luck.
Assume that I have such menu
<ul id="leftMenu">
<li class="selected">Foo1</li>
<li>Foo2</li>
<li>Foo3</li>
<li>Foo4</li>
<li>Foo5</li>
<li>Foo6</li>
</ul>
Now via javascript, I want to change the highlighted one thus remove the "selected" from the current one and add to the next one
What I need is, first remove the class from the currently selected one, than add to the next.
How can this be achieved?
EDIT: I use this for an embedded system WITHOUT mouse or jquery but remote control and plain javascript so up and down are my only options, no hover allowed :S
Using javascript for this would be an overkill in this day and age.
Since you tagged this css, may I suggest the following CSS-only method, also known as the :hover pseudo-class:
ul#leftMenu li:hover {
color: red;
}
If it were me, and I knew the menus weren't monstrously huge, I'd remove the class from all the <li> elements and then add it to the one I wanted.
var lis = document.getElementById('leftMenu').getElementsByTagName('li');
for (var i = 0; i < lis.length; ++i)
lis[i].className = lis[i].className.replace(/\bselected\b/g, '');
Now, as to how to put the class back, well that depends on how you've found your new favorite <li>. If it's in an event handler, then the event object will refer to it as the "target". You'd thus just append "selected" to the class name.
Using JavaScript, how can I dynamically change one of the list-items below from this:
<ul class="tabbernav">
<li class="tabberactive"><a title="All">All</a></li>
<li class=""><a title="One">One</a></li>
<li class=""><a title="Two">Two</a></li>
<li class=""><a title="Three">Three</a></li>
</ul>
to
<ul class="tabbernav">
<li class="tabberactive"><a title="All">All</a></li>
<li class=""><a title="One">One</a></li>
<li class=""><a title="Two">-----------NEW LIST ITEM CHANGED---------</a></li>
<li class=""><a title="Three">Three</a></li>
</ul>
I guess you could use getElementsByTagName inside of the ul to get all your list items inside an array. Then you can just edit the third element in your array, with index number 2.
var lItems = document.getElementsByTagName("ul").getElementsByTagName("li");
lItems[2].innerHTML = "<a title='Two'>----NEW LIST ITEM CHANGED-----</a>";
That will ofcourse get all ul elements on the page, and might lead to some strange results if you have more than two uls in your document. But you get the idea, right? Just ask some more if you don't understand what I'm trying to say.
Okay, the above code doesn't really work properly. I've modified my code a bit, but that also included a change in your HTML, as i presume you'll only have one ul "tabbernav", thus I changed it from class="tabbernav" to id="tabbernav". This is the code to do what you want.
var ul = document.getElementById("tabbernav");
var liArray = ul.getElementsByTagName("li");
for (var i = 0; i < liArray.length; i++) {
if(liArray[i].childNodes[0].title == "Two") {
liArray[i].innerHTML = "Your desired output";
}
}
Hope that helps you some more :)
I also suggest using jQuery, which makes selections like this trivial. In your case, you can use the :eq psuedo-selector to get the second line element:
$('.tabbernav li:eq(1)')
This selects the DOM element which is the second li (indexes start at 0) in an element with the class tabbernav. It returns a jQuery object which you can chain other methods to. Changing the inner HTML is done with .html('Your html here').
This is how you select the third Li element of your Ul list in pure JavaScript.
document.querySelectorAll("li")[2].innerHTML = "vasile";
Replace "Vasile" with your desired text.
var list = document.getElementsByTagName("li");
list[2].innerHTML = "<a title='Two'>------NEW LIST ITEM CHANGED----</a>";
this will work perfect
I know that this question is old but since it's still open, see how I modified the first answer. I feel someone else might need it.
>var lItems = document.getElementsByTagName("ul")[0];
>>var nth = lItems.getElementsByTagName("li")[2];
>>>nth.innerHTML = "<a title='Two'>----NEW LIST ITEM CHANGED-----> </a>";
So that basically solves it up by specifying the position of the lItems in particular to grab and in this case [0]. The code will not work properly if that position is missing because getElementsByTagName(NAME) returns a collection of html elements bearing that NAME specified. So that if you don't specify which among them all, the code fails.
If you like code reuse, see a function you can use for that. You just need to specify the parent element and its position and the childNode position and you get the same thing.
>var nthChild = function(parent, pos, childPos){
>>parent = document.getElementsByTagName(parent)[pos];
>>>return parent.children[childPos];
>>>>};
//used thus:
>nthChild("ul", 0, 2).innerHTML = "<a title='Two'>----NEW LIST ITEM CHANGED-----> </a>
";
How do you identify which <li> is the one you want to modify?
If you're doing it by index you could do something like this I think:
var list = document.getElementById("listid");
list.childNodes[2].innerHtml = "<a title='Two'>-----------NEW LIST ITEM CHANGED---------</a>";
Look into using a Javascript library such as JQuery. That will make your life a lot easier. Then you can do something like this:
$('li a[title=Two]').text('Changed Text Goes Here');
You'll need to check my syntax (not sure about the text() function), but it's easy enough to look up in JQuery's api docs.