I want to get the li. Here is the code:
<div>
<div id="ulMenu">
<ul id="navMainTop">
<li>
<a></a>
<div>
<ul></ul>
</div>
</li>
<li>
<a class="top-menu-txt">
<i class="fa fa-offer"></i>Offers
</a>
<div class="grid-container3 blue-link" id = "serverside2">
<ul id= "serverside">
<!-- this one -->
</ul>
</div>
</li>
</ul>
</div>
</div>
i want to get the ul with id "serverside" using jQuery. Here's what I am trying:
var mJSul = '<%=myServerSideul%>';
$("#serverside").append(mJSul.toString());
But this code is not working. Could someone help me figure this out?
$( document ).ready(function() {
var mJSul = '<li><%=myServerSideul%></li>';
$("#serverside").append(mJSul);
});
Try this
Related
I am designing a widget style using HTML ul tag.
<div class='tabs' style='width:50%'>
<ul>
<li id="basic-li"><a href='#basic_information'>Basic</a></li>
<li id="master-passenger-li"><a href='#master_passenger'>Master Passenger</a></li>
<li id="other-passenger-li"><a href='#all_passengers'>Other Passengers</a></li >
<li id="confirm-li"><a href='#confirm'>Confirmation</a></li>
</ul>
And I have 4 divs.
<div id="basic_information" class="tab">//content</div>
<div id="master_passenger" class="tab">//content</div>
<div id="other-passenger" class="tab">//content</div>
<div id="confirm" class="tab">//content</div>
I only want to show the li's href div that has currently been clicked. I only want to use HTML / CSS and jQuery.
This is the basic idea. You can improvise as per your need. I have set the target li's id as data attribute in to div where you will click. Now on click of that div i gets li's id so we can make that shown and all else li hide.
$(document).ready(function(){
$('.tab').click(function(){
$('.tabs li').hide();
var idTab = $(this).data('id');
$('#' + idTab).show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='tabs' style='width:50%'>
<ul>
<li id="basic-li"><a href='#basic_information'>Basic</a>
</li><li id="master-passenger-li"><a href='#master_passenger'>Master Passenger</a>
</li><li id="other-passenger-li"><a href='#all_passengers'>Other Passengers</a>
</li ><li id="confirm-li"><a href='#confirm'>Confirmation</a></li>
</ul>
</div>
<div id="basic_information" data-id="basic-li" class="tab">//basic info</div>
<div id="master_passenger" data-id="master-passenger-li" class="tab">//master passenger</div>
<div id="other-passenger" data-id="other-passenger-li" class="tab">//other passenger</div>
<div id="confirm" data-id="confirm-li" class="tab">//confirm</div>
Cheers...!!
This can be achieved via the following changes to your HTML, and the addition of the jQuery script below:
<ul>
<!-- add data-target attribute to each "a", with value matching corresponding tab -->
<li>
<a data-target="basic_information" href='#basic_information'>Basic</a>
</li>
<li>
<a data-target="master_passenger" href='#master_passenger'>Master Passenger</a>
</li>
<li>
<a data-target="other-passenger" href='#all_passengers'>Other Passengers</a>
</li>
<li>
<a data-target="confirm" href='#confirm'>Confirmation</a>
</li>
</ul>
<div id="basic_information" class="tab">//content</div>
<div id="master_passenger" class="tab">//content</div>
<div id="other-passenger" class="tab">//content</div>
<div id="confirm" class="tab">//content</div>
<script>
$(function() {
// Hide all tabs by default
$('.tab').hide()
// Assign click handler to all elements with data target attribute
$('[data-target]').click(function() {
// Hide all tabs
$('.tab').hide()
// Extra target id of the menu link that was clicked
var tabToShow = $(this).data('target')
// Show the corresponding tab
$('#' + tabToShow).show()
// Return false to prevent default navigation behaviour of links
return false
})
})
</script>
I am trying to take content from a nav bar, and then modify and append it to a mobile menu. The nav bar html looks like
<div id="top_bar" class="nav">
<div class="container">
<div class="row">
<nav class="clearfix">
<span>My Account</span>
<span> Rewards</span>
<span>Customer Service</span>
</nav>
</div>
</div>
</div>
I need to append the anchors above to the following menu and have them work in the format below.
<ul id="stmobilemenu" class="visible-xs visible-sm show">
<li class="stmlevel0">first</li>
<li class="stmlevel0">second</li>
<li class="stmlevel0">third</li>
</ul>
I tried to do this like
var add_to_menu;
$('#top_bar nav a').each(function(){
var line = '<li class="stmlevel0">';
$(this).addClass('ma_level_0');
line += $(this).html();
line += '</li>';
add_to_menu += line;
})
$('#stmobilemenu').append(add_to_menu);
The result of this was it added undefined, then it added only the content
so appeneded was in this type of format.
<li class="stmlevel0"><span>My account</span></li>
what I want it to add is in this type
<li class="stmlevel0"><span>My account</span></li>
Another thing I tried was
$('#stmobilemenu').append(
$('#top_bar nav a').each(function(){
$(this).prepend('<li class="stmlevel0">');
$(this).addClass('ma_level_0');
$(this).append('</li>');
}));
I had a few problems with this though, first of all the append and prepend were not actually surrounding the html I want. It comes out like
<a href="http://127.0.1.1:8080/my-account" class="top-bar-link ma_level_0">
<li class="stmlevel0"></li>
<span>My account</span>
</a>
So I need that li to actually surround the a. Also it actually removed the content of #top_bar nav a from its original spot, which is not what I want it to do. I want it only to copy and add to the mobile menu. Can someone help?
Use clone() to make a copy of each <a>
var $mobMenu= $('#stmobilemenu');// store reference to menu element
$('#top_bar nav a').each(function(){
var $link = $(this).clone().removeClass().addClass('ma_level_0');
$('<li class="stmlevel0">').append($link).appendTo( $mobMenu);
});
var anchors = $('#top_bar nav').children();
anchors.each(function(){
var $this = $(this),
$li = $('<li class="stmlevel0"></li>');
$this.removeClass().addClass('ma_level_0').appendTo($li);
$li.appendTo('#stmobilemenu');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="top_bar" class="nav">
<div class="container">
<div class="row">
<nav class="clearfix">
<span>My Account</span>
<span> Rewards</span>
<span>Customer Service</span>
</nav>
</div>
</div>
</div>
<ul id="stmobilemenu" class="visible-xs visible-sm show">
<li class="stmlevel0">first</li>
</ul>
I am trying to add and remove class using the following script to #menuElem tag:
<script type="text/javascript">
$('#menuElem li ul').each(function (){
$(this).addClass("fallback browse-experience-drop-down-width");
});
$('#menuElem li a').each(function (){
$(this).addClass("skew");
});
$('#menuElem li ul li a').each(function (){
$(this).removeClass("skew");
});
</script>
Ideally this should work, but not working, Is it possible to with regex replace?
See below the HTML that we are adding the class, you can find menuElem inside the HTML
<!-- Header zone -->
<!-- header -->
<div class="tenantHeade fs-headerfooter-widget">
<!---->
<header>
<div id="container" class="container">
<div class="logocont">website</div>
<!-- Mobile nav btn -->
<a class="nav-toggle" href="javascript:void(0);"><span class="ada-compliant visible-xs"></span></a>
<!-- Mobile user options (for anon and preferred visitors) -->
<a href="javascript:void(0);" class="member-toggle">
<span class="ada-compliant visible-xs"></span>
</a>
<!-- Main nav -->
<nav class="main-nav inactive">
<ul id="menuElem">
<li>
<span class="antiskew">Browse Experiences</span>
<ul>
<li>
website
</li>
<li>
Local
</li>
<li>
Voluntours
</li>
<li>
Welcome website
</li>
</ul>
</li>
<li>
<span class="antiskew">Become a Member</span>
</li>
<li>
<span class="antiskew">Daily Deals</span>
</li>
</ul>
No need to loop when using jQuery:
<script type="text/javascript">
$('#menuElem > li > ul').addClass("fallback browse-experience-drop-down-width");
$('#menuElem > li > a').addClass("skew");
$('#menuElem > li > ul > li > a').removeClass("skew");
</script>
Also, you should use the > sign to indicate direct children, then you probably don't need the removeClass line
var li = $('div.notification').parents("li");
var hr = li.next("hr");
li.remove();
hr.remove();
How to delete two elements in one time ? Like (li && hr).remove();
Thanks.
Just use add:
li.add(hr).remove()
$("li:has(div.notification), li:has(div.notification) + hr").remove();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
<li>
<div class="notification">notification</div>
</li>
<hr>
<li>
<div class="notification">notification</div>
</li>
<hr>
<li>
<div class="not-notification">not notification</div>
</li>
<hr>
</ul>
I want to find the 3rd p tag of each category, based on first p tag's value.
e.g. The first p tag value is Tie, then find the quantity of it.
If the html element tree should be formatted in a better way, I am open to it. The html for all ul is written from code behind at C# to load items from database.
$("#wel div ").each(function(index, element) {
if ($(this).('p:nth-of-type(1)').html() == "Tie")
{
$(this).('p:nth-of-type(3)').css('background-color','red');
}
}
<div id="fel">Category1
<ul>
<li>
<div >
<p>Shirt</p>
<p>Price:$25</p>
<p>Quantity:20</p> <!--find this?-->
</div>
</li>
<li>
<div>
<p>Tie</p>
<p>Price:$10</p>
<p>Quantity:10</p>
</div>
</li>
<li>
<div>
<p>Trousers</p>
<p>Price:$50</p>
<p>Quantity:5</p>
</div>
</li>
</ul>
</div>
<div id="wel">Category2
<ul>
<li>
<div >
<p>Shirt</p>
<p>Price:$25</p>
<p>Quantity:20</p>
</div>
</li>
<li>
<div>
<p>Tie</p>
<p>Price:$10</p>
<p>Quantity:10</p><!--find this?-->
</div>
</li>
<li>
<div>
<p>Trousers</p>
<p>Price:$50</p>
<p>Quantity:5</p>
</div>
</li>
</ul>
</div>
JSFiddle
You can 2 top level elements with different ids fel and wel so need to use #wel div, #fel div to find the category div elements, then need to use .find() to find the p
$("#wel div, #fel div").each(function (index, element) {
if ($(this).find('p:nth-of-type(1)').html().trim() == "Tie") {
$(this).find('p:nth-of-type(3)').css('background-color', 'red');
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="fel">Category1
<li>
<div>
<p>Shirt</p>
<p>Price:$25</p>
<p>Quantity:20</p>
<!--find this?-->
</div>
</li>
<li>
<div>
<p>Tie</p>
<p>Price:$10</p>
<p>Quantity:10</p>
</div>
</li>
<li>
<div>
<p>Trousers</p>
<p>Price:$50</p>
<p>Quantity:5</p>
</div>
</li>
</div>
<div id="wel">Category2
<li>
<div>
<p>Shirt</p>
<p>Price:$25</p>
<p>Quantity:20</p>
</div>
</li>
<li>
<div>
<p>Tie</p>
<p>Price:$10</p>
<p>Quantity:10</p>
<!--find this?-->
</div>
</li>
<li>
<div>
<p>Trousers</p>
<p>Price:$50</p>
<p>Quantity:5</p>
</div>
</li>
</div>
You can also do
$("#wel div, #fel div ").each(function (index, element) {
var $ps = $(this).find('p');
if ($ps.eq(0).html().trim() == "Tie") {
$ps.eq(2).css('background-color', 'red');
}
})
Demo: Fiddle
Here's the generic way of doing it
$(document).ready(function(){
var div = $('p:contains("Tie")').parent()
$('p:contains("Tie")').parent()
var price = $(div).find("p:contains('Price')").css('background-color','red');
console.log(price)
});
Please refer the fiddle here