materailize css side nav is not navigating

materailize css side nav is not navigating - javascript

<div class="navbar-fixed">
<nav class="nav-wrapper indigo ">
<img src="images/logo.png" class="responsive-img logo ">
<a href="#" class="sidenav-trigger" data-target="side-link">
<i class="material-icons white-text">menu</i>
</a>
<ul class="navigation hide-on-med-and-down right">
<li>
<strong class="white-text text-lighten-1 active">Home</strong>
</li>
<li>
<strong class="white-text text-lighten-1 active">Facts</strong>
</li>
<li>
<strong class="white-text text-lighten-1 active">Symtoms</strong>
</li>
<li>
<strong class="white-text text-lighten-1 active">Statistics</strong>
</li>
<li>
<strong class="white-text text-lighten-1 active">Precautions</strong>
</li>
<li>
<strong class="white-text text-lighten-1 active">Myths</strong>
</li>
</ul>
</div>
</nav>
<ul class="sidenav indigo" id="side-link">
<li>
Home
</li>
<li>
Symtoms
</li>
<li>
Statistics
</li>
<li>
Precautions
</li>
<li>
Facts
</li>
<li>
myths
</li>
</ul>
</header>
$(document).ready(function() {
$('.sidenav').sidenav();
});

Related

How to select the direct nth child where there are several dropdown lists?

I have a html code below, the jsfiddle link is https://jsfiddle.net/Debra321/b0d4Lupn/
<html>
<body>
<div class="side-collapse in" id="site-navigation-navbar-collapse">
<ul class="nav navbar-nav">
<li>
<a href="/" target="_self">
Home
</a>
</li>
<li class="dropdown dropdown-hover open">
<a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true">Store <b class="caret"></b></a>
<ul class="dropdown-menu col-2">
<li class="">
<a class="itemlistChange" data-url="/store/products" target="_self">
All Products
</a>
</li>
<li class="">
<a class="itemlistChange" data-url="/store/cart" target="_self">
My Cart
</a>
</li>
<li class="regularcategory"><a class="itemlistChange" data-url="/store/products/promotions">Promotions</a></li>
<li class="regularcategory"><a class="itemlistChange" data-url="/store/products/patches">Patches</a></li>
<li class="regularcategory"><a class="itemlistChange" data-url="/store/products/skincare">Skin Care</a></li>
<li class="regularcategory"><a class="itemlistChange" data-url="/store/products/maintenancekits">Maintenance Kits</a></li>
<li class="regularcategory"><a class="itemlistChange" data-url="/store/products/salestools">Sales Tools</a></li>
</ul>
</li>
<li class="dropdown dropdown-hover">
<a class="dropdown-toggle" data-toggle="dropdown">Commissions <b class="caret"></b></a>
<ul class="dropdown-menu col-2">
<li class="">
<a href="/commissions" target="_self">
Commissions
</a>
</li>
<li class="">
<a href="/rank" target="_self">
Rank Advancement
</a>
</li>
<li class="">
<a href="/volumes" target="_self">
Volumes
</a>
</li>
<li class="">
<a href="/commissions/myearnings" target="_self">
Earnings
</a>
</li>
<li class="">
<a href="/commissions-earnings" target="_self">
Commissions Earnings
</a>
</li>
<li class="">
<a href="/commissions/incomestatement" target="_self">
Income Statement
</a>
</li>
<li class="">
<a href="/commissions/commissionspaycard" target="_self">
Commissions Pay Card
</a>
</li>
<li class="">
<a href="/volume-maturity-calendar" target="_self">
Volume Maturity Calendar
</a>
</li>
<li class="">
<a href="/carry-over-volume-calendar" target="_self">
Carry Over Volume Calendar
</a>
</li>
<li class="">
<a href="/commissions/matchingbonus" target="_self">
Bonus Qualification
</a>
</li>
</ul>
</li>
<li class="dropdown dropdown-hover">
<a class="dropdown-toggle" data-toggle="dropdown">Organization <b class="caret"></b></a>
<ul class="dropdown-menu col-2">
<li class="">
<a href="/app/enrollmentredirect" target="_blank">
<i class="fa-plus"></i>
Enroll new...
</a>
</li>
<li class="">
<a href="/prepopulatedcartlist" target="_self">
Pre Populated Cart Builder
</a>
</li>
<li class="">
<a href="/personally-enrolled-team" target="_self">
Personally Enrolled Team
</a>
</li>
<li class="">
<a href="/upcoming-promotions" target="_self">
Upcoming Rank Promotions
</a>
</li>
<li class="">
<a href="/new-distributors" target="_self">
New Distributors List
</a>
</li>
<li class="">
<a href="/recent-activity" target="_self">
Recent Activity List
</a>
</li>
<li class="">
<a href="/retail-customers" target="_self">
Retail Customers
</a>
</li>
<li class="">
<a href="/preferred-customers" target="_self">
Preferred Customers
</a>
</li>
<li class="">
<a href="/reps" target="_self">
Reps
</a>
</li>
<li class="">
<a href="/binary-tree-viewer" target="_self">
Binary Tree Viewer
</a>
</li>
<li class="">
<a href="/organization/enrollertreeviewer" target="_self">
Enroller Tree Viewer
</a>
</li>
</ul>
</li>
<li>
<a href="/events" target="_self">
Events
</a>
</li>
<li>
<a href="/AutoOrder" target="_self">
Monthly Subscription Orders
</a>
</li>
<li>
<a href="/orders" target="_self">
Orders
</a>
</li>
<li>
<a href="/resources/resourcelist" target="_self">
Resources
</a>
</li>
<li class="visible-xs">
<a href="/logout" target="_self">
Sign out
</a>
</li>
</ul>
<div class="clearfix"></div>
</div>
I expect to select Organization>Binary Tree Viewer, but cannot do that successfully. Since Organization is the direct 3rd child of the ul, I try to retrieve it by
document.querySelector('#site-navigation-navbar-collapse ul > li:nth-child(3)')
But what I got is always "Promotions" in "Store". How to select the Binary Tree Viewer by CSS selectors? Any suggestions are appreciated.

How to insert HTML component using KnockoutJS

I have a sidebar menu in HTML:
assets/partials/menu.html
<div class="sidebar" id="sidebar">
<div class="sidebar-inner slimscroll">
<div id="sidebar-menu" class="sidebar-menu">
<ul>
<li class="active">
<i class="la la-dashboard"></i> <span>Dashboard</span>
</li>
<li class="submenu">
<i class="la la-phone"></i> <span> Users</span> <span class="menu-arrow"></span>
<ul style="display: none;">
<li>Manage Users</li>
</ul>
</li>
<li>
<i class="la la-rocket"></i> <span>Projects</span>
</li>
<li>
<i class="la la-tasks"></i> <span>Tasks</span>
</li>
<li class="submenu">
<i class="la la-phone"></i> <span> Health Conscious</span> <span class="menu-arrow"></span>
<ul style="display: none;">
<li>Manage Programs</li>
<li>Manage Quix / Tests</li>
<li>Broadcast Message</li>
<li>Google Play Settings</li>
<li>iTunes Settings</li>
</ul>
</li>
<li>
<i class="la la-book"></i> <span>Contacts</span>
</li>
<li>
<i class="la la-tachometer"></i> <span>Employee Dashboard</span>
</li>
<li class="submenu">
<i class="la la-user"></i> <span> Employees</span> <span class="menu-arrow"></span>
<ul style="display: none;">
<li>All Employees</li>
<li>On Board New Employee</li>
<li>Employee Reports</li>
</ul>
</li>
<li>
<i class="la la-ticket"></i> <span>Tickets</span>
</li>
<li>
<i class="la la-calendar"></i> <span>Events</span>
</li>
<li>
<i class="la la-at"></i> <span>Email</span>
</li>
<li>
<i class="la la-comments"></i> <span>Chat</span> <span class="badge badge-pill bg-primary float-right">5</span>
</li>
<li>
<i class="la la-object-ungroup"></i> <span>Assets</span>
</li>
<li>
<i class="la la-question"></i> <span>Knowledgebase</span>
</li>
<li>
<i class="la la-file-pdf-o"></i> <span>Policies</span>
</li>
<li>
<i class="la la-bell"></i> <span>Activities</span>
</li>
<li>
<i class="la la-user-plus"></i> <span>Users</span>
</li>
<li class="submenu">
<i class="la la-pie-chart"></i> <span> Reports </span> <span class="menu-arrow"></span>
<ul style="display: none;">
<li> User Report </li>
<li> Invoice Report </li>
</ul>
</li>
<li>
<i class="la la-cog"></i> <span>Settings</span>
</li>
<li class="submenu">
<i class="la la-share-alt"></i> <span>Multi Level</span> <span class="menu-arrow"></span>
<ul style="display: none;">
<li class="submenu">
<span>Level 1</span> <span class="menu-arrow"></span>
<ul style="display: none;">
<li><span>Level 2</span></li>
<li class="submenu">
<span> Level 2</span> <span class="menu-arrow"></span>
<ul style="display: none;">
<li>Level 3</li>
<li>Level 3</li>
</ul>
</li>
<li>
<span>Level 2</span>
</li>
</ul>
</li>
<li>
<span>Level 1</span>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
What I would like to do is, simply insert this html from my index page.
I tried following the tutorial on components, and all I got was a blank space where the menu was supposed to go.
Can anyone show me how to insert HTML from an external file, using knockout or not.
Thank you.
John

How to scroll a portion of my window using protractor-jasmine

I want to test by clicking an element which is only visible when the sidebar section is scrolled. The sidebar is in the left end of the website and the element is in the bottom portion of the sidebar. I used:
browser.executeScript('window.sidebar.scrollTo(0,0);').then(function ()
but it's not working.
<div class="sidebar" data-active-color="white" data-background-color="red" data-image="../assets/img/sidebar-1.jpg">
<sidebar-cmp>
<div class="logo">
<div class="logo-normal">
<a class="simple-text" href="https://www.creative-tim.com">
Creative Tim
</a>
</div>
<div class="logo-img">
<img src="/assets/img/angular2-logo-white.png">
</div>
</div>
<div class="sidebar-wrapper">
<div class="user">
<div class="photo">
<img src="../assets/img/faces/avatar.jpg">
</div>
<div class="info">
<a class="collapsed" data-toggle="collapse" href="#collapseExample">
<span>
Tania Andrew
<b class="caret"></b>
</span>
</a>
<div class="collapse" id="collapseExample">
<ul class="nav">
<li>
<a href="javascript:void(0)">
<span class="sidebar-mini">MP</span>
<span class="sidebar-normal">My Profile</span>
</a>
</li>
<li>
<a href="javascript:void(0)">
<span class="sidebar-mini">EP</span>
<span class="sidebar-normal">Edit Profile</span>
</a>
</li>
<li>
<a href="javascript:void(0)">
<span class="sidebar-mini">S</span>
<span class="sidebar-normal">Settings</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="nav-container">
<ul class="nav">
<li routerlinkactive="active" class="active visible">
<a href="#/dashboard">
<i class="material-icons">dashboard</i>
<p>Dashboard</p>
</a>
</li>
<li routerlinkactive="active">
<a data-toggle="collapse" href="#componentsExamples">
<i class="material-icons">apps</i>
<p>Components
<b class="caret"></b>
</p>
</a>
<div class="collapse" id="componentsExamples">
<ul class="nav">
<li routerlinkactive="active">
<a href="#/components/buttons">
<span class="sidebar-mini">B</span>
<span class="sidebar-normal">Buttons</span>
</a>
</li>
<li routerlinkactive="active">
<a href="#/components/grid">
<span class="sidebar-mini">GS</span>
<span class="sidebar-normal">Grid System</span>
</a>
</li>
<li routerlinkactive="active">
<a href="#/components/panels">
<span class="sidebar-mini">P</span>
<span class="sidebar-normal">Panels</span>
</a>
</li>
<li routerlinkactive="active">
<a href="#/components/sweet-alert">
<span class="sidebar-mini">SA</span>
<span class="sidebar-normal">Sweet Alert</span>
</a>
</li>
<li routerlinkactive="active">
<a href="#/components/notifications">
<span class="sidebar-mini">N</span>
<span class="sidebar-normal">Notifications</span>
</a>
</li>
<li routerlinkactive="active">
<a href="#/components/icons">
<span class="sidebar-mini">I</span>
<span class="sidebar-normal">Icons</span>
</a>
</li>
<li routerlinkactive="active">
<a href="#/components/typography">
<span class="sidebar-mini">T</span>
<span class="sidebar-normal">Typography</span>
</a>
</li>
</ul>
</div>
</li>
<li routerlinkactive="active">
<a data-toggle="collapse" href="#formsExamples">
<i class="material-icons">content_paste</i>
<p>Forms
<b class="caret"></b>
</p>
</a>
<div class="collapse" id="formsExamples">
<ul class="nav">
<li routerlinkactive="active">
<a href="#/forms/regular">
<span class="sidebar-mini">RF</span>
<span class="sidebar-normal">Regular Forms</span>
</a>
</li>
<li routerlinkactive="active">
<a href="#/forms/extended">
<span class="sidebar-mini">EF</span>
<span class="sidebar-normal">Extended Forms</span>
</a>
</li>
<li routerlinkactive="active">
<a href="#/forms/validation">
<span class="sidebar-mini">VF</span>
<span class="sidebar-normal">Validation Forms</span>
</a>
</li>
<li routerlinkactive="active">
<a href="#/forms/wizard">
<span class="sidebar-mini">W</span>
<span class="sidebar-normal">Wizard</span>
</a>
</li>
</ul>
</div>
</li>
<li routerlinkactive="active">
<a data-toggle="collapse" href="#tablesExamples">
<i class="material-icons">grid_on</i>
<p>Tables
<b class="caret"></b>
</p>
</a>
<div class="collapse" id="tablesExamples">
<ul class="nav">
<li routerlinkactive="active">
<a href="#/tables/regular">
<span class="sidebar-mini">RT</span>
<span class="sidebar-normal">Regular Tables</span>
</a>
</li>
<li routerlinkactive="active">
<a href="#/tables/extended">
<span class="sidebar-mini">ET</span>
<span class="sidebar-normal">Extended Tables</span>
</a>
</li>
<li routerlinkactive="active">
<a href="#/tables/datatables.net">
<span class="sidebar-mini">DT</span>
<span class="sidebar-normal">DataTables.net</span>
</a>
</li>
</ul>
</div>
</li>
<li routerlinkactive="active">
<a data-toggle="collapse" href="#mapsExamples">
<i class="material-icons">place</i>
<p>Maps
<b class="caret"></b>
</p>
</a>
<div class="collapse" id="mapsExamples">
<ul class="nav">
<li routerlinkactive="active">
<a href="#/maps/google">
<span class="sidebar-mini">GM</span>
<span class="sidebar-normal">Google Maps</span>
</a>
</li>
<li routerlinkactive="active">
<a href="#/maps/fullscreen">
<span class="sidebar-mini">FSM</span>
<span class="sidebar-normal">Full Screen Map</span>
</a>
</li>
<li routerlinkactive="active">
<a href="#/maps/vector">
<span class="sidebar-mini">VM</span>
<span class="sidebar-normal">Vector Map</span>
</a>
</li>
</ul>
</div>
</li>
<li routerlinkactive="active">
<a href="#/widgets">
<i class="material-icons">widgets</i>
<p>Widgets</p>
</a>
</li>
<li routerlinkactive="active">
<a href="#/charts">
<i class="material-icons">timeline</i>
<p>Charts</p>
</a>
</li>
<li routerlinkactive="active">
<a href="#/calendar">
<i class="material-icons">date_range</i>
<p>Calendar</p>
</a>
</li>
<li routerlinkactive="active">
<a data-toggle="collapse" href="#pagesExamples">
<i class="material-icons">image</i>
<p>Pages
<b class="caret"></b>
</p>
</a>
<div class="collapse" id="pagesExamples">
<ul class="nav">
<li>
<a href="./pricing.html">
<span class="sidebar-mini">P</span>
<span class="sidebar-normal">Pricing</span>
</a>
</li>
<li routerlinkactive="active">
<a href="#/pages/timeline">
<span class="sidebar-mini">T</span>
<span class="sidebar-normal">Timeline Page</span>
</a>
</li>
<li>
<a href="./login.html">
<span class="sidebar-mini">LP</span>
<span class="sidebar-normal">Login Page</span>
</a>
</li>
<li>
<a href="./register.html">
<span class="sidebar-mini">RP</span>
<span class="sidebar-normal">Register Page</span>
</a>
</li>
<li>
<a href="./lock.html">
<span class="sidebar-mini">LSP</span>
<span class="sidebar-normal">Lock Screen Page</span>
</a>
</li>
<li routerlinkactive="active">
<a href="#/pages/user">
<span class="sidebar-mini">UP</span>
<span class="sidebar-normal">User Page</span>
</a>
</li>
</ul>
</div>
</li>
</ul>
<div class="sidebar-moving-tab" style="transform: translate3d(0px, 5px, 0px);"></div></div>
</div>
</sidebar-cmp>
<div class="sidebar-background" style="background-image: url(assets/img/sidebar-1.jpg)"></div>
</div>

Specify the position at what location you have to scroll, try this one.
browser.executeScript('window.scrollTo(0,1000);').then(function () {
browser.sleep(5000);
console.log('Window ScrollTo','Done');
}).then(function() {
//wait for element to be displayed
browser.driver.wait(function(){
return someElement.isDisplayed().then(function (isVisible){
return isVisible === true;
},50000, 'Element not present ' );
},50000)
});

I've been using this line for scrolling.
You can also try it on console before using it on protractor.
e.g. $(".sidebar").scrollLeft(1000)
strPixels = 1000 //value in pixel
strClass = '.sidebar' //class of the element with scrollbar
browser.executeScript('$("' + strClass + '").scrollLeft(' + strPixels + ')');
Note: you can use scrollLeft or scrollTop to scroll horizontally or vertically.

var filter = theSwitch.pageBar;
var scrollIntoView = function () {
arguments[0].scrollIntoView();
};
browser.executeScript(scrollIntoView, filter);
theSwitch.pageBar.click();

Zurb foundation tobar hover only on desktop but still click on tablet

ok this is my codepen http://codepen.io/anon/pen/epbePZ
<li class="has-dropdown not-click">
Programs
<ul class="dropdown m-menu"><li class="title back js-generated"><h5>Back</h5></li><li class="parent-link show-for-small-only"><a class="parent-link js-generated" href="#">Programs</a></li>
<li>
<div class="row">
<div class="medium-4 column">
<h3>Undergraduate</h3>
<ul>
<li>
<i class="icon-circle-right"></i>Admissions
</li>
<li>
<i class="icon-circle-right"></i>Academics
</li>
<li>
<i class="icon-circle-right"></i>Fields of Study
</li>
<li>
<i class="icon-circle-right"></i>Fees and Finance
</li>
<li>
<i class="icon-circle-right"></i>Useful Contacts
</li>
</ul>
</div><!--end of .column-->
<div class="medium-4 column">
<h3>Graduate</h3>
<ul>
<li>
<i class="icon-circle-right"></i>Admissions
</li>
<li>
<i class="icon-circle-right"></i>Academics
</li>
<li>
<i class="icon-circle-right"></i>Fields of Study
</li>
<li>
<i class="icon-circle-right"></i>Fees and Finance
</li>
</ul>
</div><!--end of .column-->
<div class="medium-4 column">
<h3>Online Learning</h3>
<ul>
<li>
<i class="icon-circle-right"></i>Why e-learning?
</li><li>
<i class="icon-circle-right"></i>Studies
</li>
<li>
<i class="icon-circle-right"></i>Date & Deadlines
</li>
<li>
<i class="icon-circle-right"></i>Fees and Finance
</li>
<li>
<i class="icon-circle-right"></i>Contact
</li>
</ul>
</div><!--end of .column-->
</div><!--end of .row-->
<div class="row">
<div class="medium-4 column">
<h3>Read</h3>
<a href="#" class="intro">
<i class="icon-play"></i>
<img src="https://unsplash.it/400/280?image=532">
</a>
</div><!--end of .column-->
<div class="medium-4 column">
<h3>Build</h3>
<a href="#" class="intro">
<i class="icon-play"></i>
<img src="https://unsplash.it/400/280?image=534">
</a>
</div><!--end of .column-->
<div class="medium-4 column">
<h3>Enjoy</h3>
<a href="#" class="intro">
<i class="icon-play"></i>
<img src="https://unsplash.it/400/280?image=452">
</a>
</div><!--end of .column-->
</div><!--end of .row-->
</li>
</ul>
</li>
the drop down works ok and but when you click on the dropdown and hover over another they overlap i just want it to hover on desk top and click on tablet. is it to do with a not-click element ?
think that makes sense any help would greatly appreciated
Thanks
dan

It can be kind of confusing, but I followed some of the docs as I'm sure you did here: http://foundation.zurb.com/docs/components/dropdown.html
I put the data-options in the a of the dropdown similar to the below code.
<li class="has-dropdown">
Programs
<ul id="hover1" class="dropdown m-menu" data-dropdown-content>
<li>
<div class="row">
<div class="medium-4 column">
<h3>Undergraduate</h3>
<ul>
<li>
<i class="icon-circle-right"></i>Admissions
</li>
<li>
<i class="icon-circle-right"></i>Academics
</li>
<li>
<i class="icon-circle-right"></i>Fields of Study
</li>
<li>
<i class="icon-circle-right"></i>Fees and Finance
</li>
<li>
<i class="icon-circle-right"></i>Useful Contacts
</li>
</ul>
</div><!--end of .column-->
<div class="medium-4 column">
<h3>Graduate</h3>
<ul>
<li>
<i class="icon-circle-right"></i>Admissions
</li>
<li>
<i class="icon-circle-right"></i>Academics
</li>
<li>
<i class="icon-circle-right"></i>Fields of Study
</li>
<li>
<i class="icon-circle-right"></i>Fees and Finance
</li>
</ul>
</div><!--end of .column-->
<div class="medium-4 column">
<h3>Online Learning</h3>
<ul>
<li>
<a href="#"><i class="icon-circle-right"></i>Why e-learning?</a
</li>
<li>
<i class="icon-circle-right"></i>Studies
</li>
<li>
<i class="icon-circle-right"></i>Date & Deadlines
</li>
<li>
<i class="icon-circle-right"></i>Fees and Finance
</li>
<li>
<i class="icon-circle-right"></i>Contact
</li>
</ul>
</div><!--end of .column-->
</div><!--end of .row-->
<div class="row">
<div class="medium-4 column">
<h3>Read</h3>
<a href="#" class="intro">
<i class="icon-play"></i>
<img src="https://unsplash.it/400/280?image=532" />
</a>
</div><!--end of .column-->
<div class="medium-4 column">
<h3>Build</h3>
<a href="#" class="intro">
<i class="icon-play"></i>
<img src="https://unsplash.it/400/280?image=534" />
</a>
</div><!--end of .column-->
<div class="medium-4 column">
<h3>Enjoy</h3>
<a href="#" class="intro">
<i class="icon-play"></i>
<img src="https://unsplash.it/400/280?image=452" />
</a>
</div><!--end of .column-->
</div><!--end of .row-->
</li>
</ul>
</li>
If you put this similar convention on all your dropdown items including the data-dropdown-content attribute on the ul tags containing your dropdown content, you should be good to get a standard hover effect on them without the overlapping.

finding the last span in DOM with a particular classname

<div class="comments_container clearfix">
<hr />
<ul class="comment_struct">
<li class="commenter_pic">
<img src="images/im.jpg" alt="picture"/>
<span class="button blue square likes">9 Likes</span>
</li>
<li class="comment_data">
<ul class="post_info_options">
<li class="commenter_name">Abc</li>
<li class="comment"><p>hello how are you doing</p></li>
<li class="time">
<span class="comment_time">12 June 2012<>
<span class="time_elapsed">7 hours ago</span>
</li>
<li class="options">
<span>Once More</span>
<span>Comment</span>
<span>Like</span>
</li>
<li>
</li>
</ul>
</li>
<li class="delete_comment"><img src="images/Cancel.png" alt="delete_post"/></li>
</ul>
<br/>
<ul class="comment_struct">
<li class="commenter_pic">
<img src="images/im.jpg" alt="picture"/>
<span class="button blue square likes">9 Likes</span>
</li>
<li class="comment_data">
<ul class="post_info_options">
<li class="commenter_name">Abc</li>
<li class="comment"><p>hello how are you doing</p></li>
<li class="time">
<span class="comment_time">12 June 2012<>
<span class="time_elapsed">7 hours ago</span>
</li>
<li class="options">
<span>Once More</span>
<span>Comment</span>
<span>Like</span>
</li>
<li>
</li>
</ul>
</li>
<li class="delete_comment"><img src="images/Cancel.png" alt="delete_post"/></li>
</ul>
<br/>
<ul class="comment_struct">
<li class="commenter_pic">
<img src="images/im.jpg" alt="picture"/>
<span class="button blue square likes">9 Likes</span>
</li>
<li class="comment_data">
<ul class="post_info_options">
<li class="commenter_name">Abc</li>
<li class="comment"><p>hello how are you doing</p></li>
<li class="time">
<span class="comment_time">12 June 2012<>
<span class="time_elapsed">7 hours ago</span>
</li>
<li class="options">
<span>Once More</span>
<span>Comment</span>
<span>Like</span>
</li>
<li>
</li>
</ul>
</li>
<li class="delete_comment"><img src="images/Cancel.png" alt="delete_post"/></li>
</ul>
<br/>
I have html structure as above .. so starting from $('.comments_container') how can i traverse to the last span in the DOM with class 'comment_time'. Help would be appreciated.
traversing using children() is possible. But i want to know is there any simpler way

You can use :last selector:
var mySpan = $('.comments_container span.comment_time:last');

We Keep Coding

JavaScript is the programming language of the Web.

materailize css side nav is not navigating - javascript

Related

How to select the direct nth child where there are several dropdown lists?

How to insert HTML component using KnockoutJS

How to scroll a portion of my window using protractor-jasmine

Zurb foundation tobar hover only on desktop but still click on tablet

finding the last span in DOM with a particular classname

Categories

Resources