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