finding the last span in DOM with a particular classname - javascript

<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');

Related

materailize css side nav is not navigating

<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();
});

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

Get inner text to the before lastchild element

I have the following example, where I'm trying to extract the inner text for "a" element , which is a child of "i" element located before the last child of the list.
Example:
<div class="lms-pagination" id="lms-pagination">
<ul>
<li class="disabled">
<span class="current prev">Previous page</span>
</li>
<li class="active">
<span class="current en-lang">1</span>
</li>
<li>
<a data-page="1" class="page-link en-lang">2</a>
</li>
<li>
<a data-page="2" class="page-link en-lang">3</a>
</li>
<li class="disabled"><span class="ellipse">...</span></li>
<li>
<a data-page="17" class="en-lang">18</a> <!-- Try to extract 18 in this example -->
</li>
<li>
Next page
</li>
</ul>
</div>
I'm trying to use something like
lastPage = await newPage.$$eval('#lms-pagination>ul>li:nth-child(???)>a', el => el.innerText);
Using Javascript:=
function myFunction() {
var list = document.getElementById("myList").lastChild.innerHTML;
document.getElementById("demo").innerHTML = list;
var items = document.querySelectorAll("li");
var lastchild = items[items.length - 2].innerHTML;
document.getElementById("demo1").innerHTML = lastchild;
}
<p>Example list:</p>
<ul id="myList">
<li>Coffee</li>
<li>Tea</li>
<li>Coffee22</li>
<li>Tea22</li>
<li>Coffee33</li>
<li>Tea33</li>
</ul>
<p>Click the button to get the HTML content of the list's last child node.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<p id="demo1"></p>
<script>
</script>
Using jQuery:=
alert($("li:nth-last-of-type(2)").text())
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="lms-pagination" id="lms-pagination">
<ul>
<li class="disabled">
<span class="current prev">Previous page</span>
</li>
<li class="active">
<span class="current en-lang">1</span>
</li>
<li>
<a data-page="1" class="page-link en-lang">2</a>
</li>
<li>
<a data-page="2" class="page-link en-lang">3</a>
</li>
<li class="disabled"><span class="ellipse">...</span></li>
<li>
<a data-page="17" class="en-lang">18</a>
<!-- Try to extract 18 in this example -->
</li>
<li>
Next page
</li>
</ul>
</div>
You can get second last child value like this.
$("li").eq(-2).text()

How to apply classes based on the open linked?

My sidebar menu has the ability to expand and reveal the subsections of a section as shown below. The open section has the open active class and the clicked link has the active class.
All of my links has a different #url.So this will determine the classes.
How can I automatically place the open active and active classes based on the opened link? I can also use PHP.
<ul class="menu-items scroll-content">
<li class="open active">
<a href="javascript:;"><span class="title">first section</span>
<span class="open arrow"></span></a>
<span class="icon-thumbnail">LV</span>
<ul class="sub-menu">
<li class="active">
First Section 1
<span class="icon-thumbnail">au</span>
</li>
<li class="">
First Section 2
<span class="icon-thumbnail">ou</span>
</li>
</ul>
</li>
<li class="">
<a href="javascript:;"><span class="title">Second section</span>
<span class="arrow"></span></a>
<span class="icon-thumbnail">LV</span>
<ul class="sub-menu">
<li class="">
Second Section 1
<span class="icon-thumbnail">au</span>
</li>
</ul>
</li>
</ul>
Try like this:
HTML:
<ul>
<li class="">
<a href="javascript:;"><span class="title">first section</span>
<ul class="sub-menu">
<li class="">
First Section 1
<span class="icon-thumbnail">au</span>
</li>
<li class="">
First Section 2
<span class="icon-thumbnail">ou</span>
</li>
</ul>
</li>
<li class="">
<a href="javascript:;"><span class="title">Second section</span>
<ul class="sub-menu">
<li class="">
Second Section 1
<span class="icon-thumbnail">au</span>
</li>
</ul>
</li>
</ul>
JS:
var href = location.pathname+location.hash;
$('.sub-menu > li > a').each(function() {
if ($(this).attr("href") == href) {
$(this).parent('li').addClass('active');
$(this).parent().parent().parent('li').addClass('open active');
}
});

Combine Navigation UL jQuery Function

I am trying to write a function that will combine two children ul#level_2and append them to their parent li#level_1 within a dropdown #navigation.
I currently have the following which does the job, but it means I have to manually target each category. I'm sure there is a far shorter way to produce the same results with very little code.
$('li#furniture ul.level_2').children('li').appendTo('li#furniture ul.level_2:first');
$('li#furniture ul.level_2').children('li').not(':first').remove();
Here is a shortened version of my current html structure & below is the desired result:
Simple Current HTML
<div id="navigation">
<ul id="level_1">
<li class="level_1">
<div class="subnav_wrapper">
<ul class="level_2">
<li class="level_2">
Link A
</li>
</ul>
<ul class="level_2">
<li class="level_2">
Link B
</li>
</ul>
</div>
</li>
</ul>
</div>
Desire HTML
<div id="navigation">
<ul id="level_1">
<li class="level_1">
<ul class="level_2">
<li class="level_2">
Link A
</li>
<li class="level_2">
Link B
</li>
</ul>
</li>
</ul>
</div>
Full Detailed HTML
<div id="navigation">
<ul id="level_1">
<li class="level_1 furniture">
Furniture
<div class="subnav_wrapper">
<ul class="level_2">
<li class="level_2 sofa">
Sofa
</li>
</ul>
<ul class="level_2">
<li class="level_2 bed">
Bed
</li>
</ul>
</div>
</li>
<li class="level_1 bathroom">
Bathroom
<div class="subnav_wrapper">
<ul class="level_2">
<li class="level_2 shower">
<a href="#">Shower/a>
</li>
</ul>
<ul class="level_2">
<li class="level_2 bath">
Bath
</li>
</ul>
</div>
</li>
</ul>
</div>
This should do what you need.
var wrapper = $(".subnav_wrapper").contents();
$(".subnav_wrapper").replaceWith(wrapper );
$('ul.level_2').children('li').appendTo('ul.level_2:first');
$('ul.level_2').not(':first').remove();
JSFIDDLE DEMO

Categories