I am working on a project and facing a problem. It's a jQuery problem and I am not good in jQuery. I want when someone clicked on list item(<ul id="res-menu-filters"><li></li></ul>) the value will change on h3(<h3 id="menu-title-layout-text">Change Value</h3>) tag with the value of div#menu-extend-title (<div id="menu-extend-title">Breakfast</div>).
I tried a jQuery but it's not working.
Below is my html code and jQuery code.
How should i make this work?
Thanks in advance.
<div class="menu-title-layout-change">
<h3 id="menu-title-layout-text">Breakfast</h3>
</div>
<ul id="res-menu-filters">
<li class="filter">Category 1
<div id="menu-extend-title">
Breakfast
</div>
</li>
<li class="filter">Category 2
<div id="menu-extend-title">
Launch
</div>
</li>
<li class="filter">Category 3
<div id="menu-extend-title">
Dinner
</div>
</li>
jQuery code:
jQuery('#restaurant-menu-content-tab').on('click', '#res-menu-filters li', function(e)
{
var value = jQuery('#menu-extend-title').text();
jQuery('#menu-title-layout-text').text(value);
return false;
});
Use common class instead if you used duplicated ids
<ul id="res-menu-filters">
<li class="filter">Category 1
<div class="menu-extend-title">
Breakfast
</div>
</li>
<li class="filter">Category 2
<div class="menu-extend-title">
Launch
</div>
</li>
<li class="filter">Category 3
<div class="menu-extend-title">
Dinner
</div>
</li>
jquery
jQuery('#restaurant-menu-content-tab').on('click', '#res-menu-filters li', function(e){
var value = jQuery(this).find('.menu-extend-title').text();
jQuery('#menu-title-layout-text').text(value);
return false;
});
ID of an element must be unique, so need to use class to group similar elements, also in the click handler you need to find the title element which is a descendant of the clicked li
jQuery('#restaurant-menu-content-tab').on('click', '#res-menu-filters li', function(e) {
var value = jQuery(this).find('.menu-extend-title').text();
jQuery('#menu-title-layout-text').text(value);
return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="restaurant-menu-content-tab">
<div class="menu-title-layout-change">
<h3 id="menu-title-layout-text">Breakfast</h3>
</div>
<ul id="res-menu-filters">
<li class="filter">Category 1
<div class="menu-extend-title">Breakfast</div>
</li>
<li class="filter">Category 2
<div class="menu-extend-title">Launch</div>
</li>
<li class="filter">Category 3
<div class="menu-extend-title">Dinner</div>
</li>
</ul>
</div>
It doesn't work because of the following issues:
HTML menu-extend-title is an ID. It should be unique for elements.
Change menu-extend-title to class and use .menu-extend-title.
Use the following code:
<li class="filter">Category 1
<div class="menu-extend-title">
Breakfast
</div>
</li>
<li class="filter">Category 2
<div class="menu-extend-title">
Launch
</div>
</li>
<li class="filter">Category 3
<div class="menu-extend-title">
Dinner
</div>
</li>
jQuery('#restaurant-menu-content-tab').on('click', '#res-menu-filters li', function(e) {
var value = jQuery('.menu-extend-title', this).text();
jQuery(this).find('div').text(value);
return false;
});
As arun pointed out, IDs should be unique. You should rather use classname. also you can use current li context to get the required div in it using current clicked context and find selector:
jQuery('#restaurant-menu-content-tab').on('click', '#res-menu-filters li', function(e){
var value = jQuery(this).find('div').text();
jQuery('#menu-title-layout-text').text(value);
return false;
});
Do you mean something like this:
here a better html code:
<div class="menu-title-layout-change">
<h3 class="menu-title-layout-text">Breakfast</h3>
</div>
<ul class="res-menu-filters">
<li class="filter">Category 1
<div class="menu-extend-title">
Breakfast
</div>
</li>
<li class="filter">Category 2
<div class="menu-extend-title">
Launch
</div>
</li>
<li class="filter">Category 3
<div class="menu-extend-title">
Dinner
</div>
</li>
Make sure your html id's are unique!
And this jquery:
$(document).on('click','.res-menu-filters',function(){
$('.menu-title-layout-text').text($(this).find('.menu-extend-title').text());
})
Related
I have a small thing I hang up on.
I have this markup
<div class="menu-build-group"> <!-- Level 1 -->
<ul class="menu-build-items">
<li class="menu-build-item-wrapper">Level 1 Level 1 Level 1
<div class="menu-item-relative-wrap">
<div class="menu-build-item">
<div class="menu-item-handle">
<span class="menu-item-number">1</span>
</div>
</div>
</div>
<div class="menu-keypress">
<div class="menu-build-group">
<ul class="menu-build-items">
<li class="menu-build-item-wrapper">Level 2 Level 2 Level 2
<div class="menu-item-relative-wrap">
<div class="menu-build-item">
<div class="menu-item-handle">
<span class="menu-item-number">1.1</span>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</li>
<li class="menu-build-item-wrapper">...</li>
<li class="menu-build-item-wrapper">...</li>
<li class="menu-build-item-wrapper">...</li>
<li class="menu-build-item-wrapper">...</li>
<li class="menu-build-item-wrapper">...</li>
</ul>
</div>
I am trying to change the menu-item-number just for the first level.
I used this code witch I know is not working in my case.
function changeSectionNumbers(triggerEl){
var sectionMenuGr = triggerEl.closest('.menu-build-group');
sectionMenuGr.find('.menu-build-item-wrapper').each(function(index){
var myIndex = index+1;
$(this).find('.menu-item-number').text(myIndex);
})
}
Is there any way I can get only the first level of elements "menu-build-item-wrapper" and change the menu-item-number text?
Try this:
<ul class="root-list menu-build-items">
<li class="menu-build-item-wrapper">Level 1 Level 1 Level 1
<div class="menu-keypress">
<div class="menu-build-group">
<ul class="menu-build-items">
<li class="menu-build-item-wrapper">Level 2 Level 2 Level 2
Please note the root-list class added to the first ul element
$("ul.root-list > li.menu-build-item-wrapper").each(function(index){
var myIndex = index+1;
$(this).find('.menu-item-number').text(myIndex);
});
you could wrap the outer most ul in a div eg
<div class="allitems">...</div>
Then you can use the the direct descendant operator: >
$(".allitems >
.menu-build-items >
.menu-build-item-wrapper >
.menu-item-relative-wrap >
.menu-build-item >
.menu-item-handle >
span");
Get the first level item by using below selector
$(".menu-build-group .menu-build-item-wrapper .menu-item-number:eq(0)")
Below loop to change text.
var count=1;
$(".menu-build-group .menu-build-item-wrapper .menu-item-number:eq(0)").
each( function( ) {
this.innerHTML=count;count++;
});
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
I'm trying to make a drop down menu and have it open sub menus on click and close them on click, but I cannot even get it to hide my submenu to start off with on a click.
Here is my JQuery code:
$(document).ready(function(){
$("#timeli").click(function(){
$("#timeUlSub").hide();
});});
And this is my html code that I am trying to get to hide/show
<div class="timeline">
<ul>
<li id="timeli">1996
<ul id="timeUlSub">
<li>
<p class="timeline-date">1997</p>
<p class="timeline-description">This is in the submenu</p>
</li>
</ul>
</li>
<li>1999</li>
<li>2000</li>
<li>2004</li>
<li>2006</li>
<li>2007</li>
</ul>
</div>
Am I doing something wrong on the jquery end? Because from what I have looked on here this should be working, but it's not.
Using toggle() may be more effective:
$("#timeli").click(function(){
$("#timeUlSub").toggle();
});
Example Fiddle
$(document).ready(function(){
$("#timeli").on('click', function()
{
$("#timeUlSub").toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="timeline">
<ul>
<li id="timeli">1996
<ul id="timeUlSub">
<li>
<p class="timeline-date">1997</p>
<p class="timeline-description">This is in the submenu</p>
</li>
</ul>
</li>
<li>1999</li>
<li>2000</li>
<li>2004</li>
<li>2006</li>
<li>2007</li>
</ul>
</div>
#timeUlSub is part of the #timeli li. Move it outside the li. In addition, jquery .slideToggle() is a better method than .hide().
Check if you have Jquery linked.
Try this out for conditional usage :
$(document).ready(function(){
$("#timeli").on('click', function(){
if($("#timeUlSub").is(':hidden')){
$("#timeUlSub").show();
} else {
$("#timeUlSub").hide();
}
});
});
<div class="timeline">
<ul>
<li id="timeli">1996
<ul id="timeUlSub">
<li>
<p class="timeline-date">1997</p>
<p class="timeline-description">This is in the submenu</p>
</li>
</ul>
</li>
<li>1999</li>
<li>2000</li>
<li>2004</li>
<li>2006</li>
<li>2007</li>
</ul>
</div>
#timeUlSub{
display:none;
}
$(document).ready(function(){
$("#timeli").click(function(){
$("#timeUlSub").toggle();
});});
jsfiddle: http://jsfiddle.net/shellyjindal/rxb56emp/
Basically i want to click on a tab and a drop down menu appears then when you re-click the same tab or any of the others I want it to hide that tab/show the other tab if clicked on the same/other tab.
I tried
$('.click').click(function() {
$(this).find('.sub-nav-list').toggleClass('active');
});
and tried
$('.click').click(function() {
$('.sub-nav-list').removeClass('active');
$(this).find('.sub-nav-list').toggleClass('active');
});
but cant work it out! any insight? Thanks
html:
<nav class="secondary-nav">
<ul class="list clearfix">
<li class="leaders click">Leadership <span class="arrow">></span>
<ul class="sub-nav-list">
<li>Management</li>
<li>Board of Directors</li>
</ul>
</li>
<li class="contact click">Contact Info <span class="arrow">></span>
<ul class="sub-nav-list">
<li>Email Notification</li>
<li>Information Request</li>
</ul>
</li>
<li class="docs click">Documents <span class="arrow">></span>
<ul class="sub-nav-list">
<li>Governance Documents</li>
<li>Press Release</li>
<li>Reports & Presentations</li>
<li>Sec Filings</li>
<li>Frenquently Asked Questions</li>
<li>Tax Information</li>
</ul>
</li>
<li class="research click">Research <span class="arrow">></span>
<ul class="sub-nav-list">
<li>Dividends and Distributions</li>
<li>Stock Information</li>
<li>Analyst Coverage</li>
<li>Market Makers</li>
</ul>
</li>
</ul>
</nav>
I can see at least two possible issues there.
1) sub-nav-list is not a children of click element. If they are on the same level something like that might work:
$('.click').click(function() {
$(this).parent().find('.sub-nav-list').toggleClass('active');
});
2) You have these elements generated dynamically - so you need use on with selector of any parent element that exists before you dynamically generate your sub-menus (let say nav-list):
$(".click").on("click", ".nav-list", function() {
$(this).parent().find('.sub-nav-list').toggleClass('active');
});
I have this html code:
<div id="menu">
<ul id="menuFuncionalidades">
<li>
<div class="menuFuncionalidades_categoria">
Index</div>
</li>
<li>
<div class="menuFuncionalidades_categoria">
Cadastros</div>
<div class="menuFuncionalidades_content_links">
<div class="menuFuncionalidades_content_links_descricao">
<span class="menuFuncionalidades_content_links_descricao_titulo">Descrição</span>
<div class="menuFuncionalidades_content_links_descricao_texto">
Lorem Ipsum...
</div>
</div>
<div class="menuFuncionalidades_content_links_links">
<ul><b>Acesso Usuario</b>
<li>Pesquisar </li>
<li>Incluir </li>
<li>Alterar </li>
<li>Consultar </li>
</ul>
<ul><b>Produto</b>
<li>Pesquisar </li>
<li>Incluir </li>
</ul>
<ul><b>Perfil</b>
<li>Pesquisar </li>
<li>Incluir </li>
</ul>
</div>
</div>
</li>
<li>
<div class="menuFuncionalidades_categoria">
Coletores</div>
<div class="menuFuncionalidades_content_links">
<div class="menuFuncionalidades_content_links_descricao">
<span class="menuFuncionalidades_content_links_descricao_titulo">Descrição</span>
<div class="menuFuncionalidades_content_links_descricao_texto">
Lorem Ipsum...
</div>
</div>
<div class="menuFuncionalidades_content_links_links">
<ul>
<b>Coletor 1</b>
<li>Pesquisar </li>
<li>Incluir </li>
</ul>
<ul>
<b>Coletor 2</b>
<li>Pesquisar </li>
<li>Incluir </li>
</ul>
<ul>
<b>Coletor 3</b>
<li>Pesquisar </li>
<li>Incluir </li>
</ul>
</div>
</div>
</li>
</ul>
</div>
My objective is when i click in a menuFuncionalidades_categoria i close all menuFuncionalidades_content_links that is opened, and opened the right one that is in the same level of the menuFuncionalidades_categoria that i click. So, i try this, but i have no success:
$(document).ready(function () {
$('#menuFuncionalidades > li > .menuFuncionalidades_categoria').click(function () {
$("#menu").children().find('.menuFuncionalidades_content_links').each(function () {
// I need a code here to close only the tags that are opened but is not the current
if ($(this).css('display') == 'block') {
$(this).hide();
}
});
$(this).parent().find('.menuFuncionalidades_content_links').slideToggle('normal').css('width', $('#menu').css('width'));
});
});
What am i missing or doing wrong?
OBS: The behavior that i want, is similar with accordion menu.
DEMO here: http://fiddle.jshell.net/ry9dz/1/
As #karim79 says, you can't check "display" that way - it's a css attribute, not an html attribute.
On the other hand, if you want to close all other entries, then just do that - no need to check if they are visible first! I also suggest you use a more efficient event handler for all your items, instead of binding it to all of them. Using jQuery 1.7, something like this would work:
$(document).ready(function () {
$("#menuFuncionalidades").on("click", ".menuFuncionalidades_categoria", function(event) {
var selectedMenu = $(event.target).parents("li").find(".menuFuncionalidades_content_links")
, visible = selectedMenu.is(":visible");
// Hide all others
$("#menuFuncionalidades .menuFuncionalidades_content_links").hide();
// Show this one unless it was already visible
if(!visible) {
selectedMenu
.slideToggle('normal')
.css('width', $('#menu').css('width'));
}
// Prevent the default action
event.preventDefault();
});
});
You can hide multiple elements without iterating though all of them to see which ones aren't hidden.
Replace;
$("#menu").children().find('.menuFuncionalidades_content_links').each(function () {
if ($(this).attr('display') == 'block') {
$(this).hide();
}
});
with;
$("#menu").find('.menuFuncionalidades_content_links').hide();
$(this).attr('display') is invalid as there are no "display" attribute and instead of using .css('display') == 'block' you could simply use the psuedo selector :visible.
You want the display css property:
if ($(this).css('display') == 'block') {
$(this).hide();
}
or:
if ($(this).is(':visible')) {
$(this).hide();
}