How can add span to parent menu [closed] - javascript

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
how can I add span that have arrow picture for the ul.menu li that have child elements (ul.sub-menu li ).
HTML
<ul class="menu">
<li>hhh</li>
<li>hhh
<ul class="submenu">
<li>kkk</li>
<li>kkk</li>
<li>kkk</li>
</ul>
</li>
<li>hhh</li>
</ul>
how can do that by jquery or css

This jQuery code should work:
$(".submenu").parent().append("<span class='arrow'></span>");

There is no proper way exist to give you perfect answer, because you don't provide complete code (JS, HTML).
But as your requirement: if you want to add a span to parent menu -
First you need to select parent element, for this you can use .parent() jquery selector.
Jquery selector .parent() : - Get the parent of each element in the current set of matched elements, optionally filtered by a selector.
Here complete documentation of jquery .Parent()
And second:
use .append() - for adding element to the end of selected element
$(".submenu").parent().append("<span class='arrow'></span>");
use .prepend() - for adding element to the beginning of selected element
$(".submenu").parent().prepend("<span class='arrow'></span>");

Try this,
$("ul.submenu").closest('li').children('a').append("<span> ▼</span>");
Demo

Use this if you want add class to ul tag along with menu
$(".submenu").parent().parent().append("<span class='arrow'></span>");

Related

Javascipt to hide by class and the name [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed last year.
Improve this question
I want to hide by the class and the name attribute in div
This wont work
$("div.ind_post").find("[name^='1']").hide();
This work
$("div.ind_post").hide();
$("div").find("[name^='1']").hide();
I wonder why i can hide by the element with class, or the name, but i cannot hide with class and name both.
so my question is how to hide within the class, by a specify name, thanks!
find searches descendants
Get the descendants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element.
You should do
$("div.ind_post[name^='1']").hide();
I suspect the reason why $("div").find("[name^='1']").hide(); worked is that you had some div element higher up in the DOM hierarchy
Keeping in mind that name attributes are not allowed on div elements.
find searches the descendants of the selected elements.
If you want an element which matches a class selector and an attribute selector then you need to either search for them together in the first place:
$("div.ind_post[name^='1']")
or filter the collection of matched elements on the extra rule
$("div.ind_post").filter("[name^='1']").hide();

jQuery to add two divs after UL [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I'm wanting to add two divs after my UL via jQuery. How can I do this?
My UL is:
<ul class="linkList navigationLinks enabled" id="globalNav">
<li class="navigationGroup" id="globalNavItem1">
<a href="#><span>New</span></a>
</li>
</ul>
The divs I would like to add after the UL are:
<div id="left-primenav-bg"></div>
<div id="right-primenav-bg"></div>
Thank you.
If the elements already exist and only need to be moved:
jQuery('#left-primenav-bg, #right-primenav-bg').insertAfter('#globalNav');
jsfiddle
If not, use jQuery to create them on the spot:
jQuery('<div id="left-primenav-bg"></div><div id="right-primenav-bg"></div>')
.insertAfter('#globalNav');
jsfiddle
In both jsfiddles I've added content to the divs for clarity reasons. In the first I've added the existing elements into a hidden div to show they actually get moved out of that div.
Also, check the jQuery documentation on the insertAfter method: http://api.jquery.com/insertAfter/
Easiest way would be
$("#globalNav").after('<div id="left-primenav-bg"></div><div id="right-primenav-bg"></div>')
Documentation : http://api.jquery.com/after/

make active while click using javascript [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I have some content which I have displayed by id when click. I need a javascript function for active links (class name is .active), and it will remove(.active) when other links have been active,
An example of the code structure is:
<ul class="product">
<li>Myanmar</li>
<li>Madagascar</li>
<li>United States of America</li>
<li>Ethiopia</li>
<li>Brazil</li>
<li>Australia</li>
<li>China</li>
<li>Kenya</li>
<li>Canada</li>
</ul>
but to add to Davids answer this is what you are going to want to do:
first check if the link you are clicking has the class of active before you do anything so you can avoid flicker (I am assuming you are going to jump to divs either animated or not)
$('ul.product a').click(function(){
if(!$(this).hasClass("active")){
$(".active").removeClass("active");
$(this).addClass("active");
}else{
return false;//this prevents flicker
}
});
Try something like this:
$('ul.product a').click(function(){
$('ul.product a').removeClass("active");
$(this).addClass("active");
});
Fiddle: http://jsfiddle.net/s8nky/
check : http://jsfiddle.net/en2LT/
try this...when clicking the link you should addclass active and removeclass active

Disable mouse in tag "li" [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I'm in doubt how to, disable the mouse over an image that is in such a tag "li".
I managed to disable the click event, but is necessary an event that even the mouse would go away and there would any action on the tag.
Like a java disable.
Only in jquery or javascript.
Tank's.
Disabling click:
$("#btnEmpresarial").removeAttr('onclick');
If you are looking to hide the mouse cursor, you can always use the CSS property cursor in this way:
cursor: 'none';
Living demo: http://jsfiddle.net/FhCLP/
If you also want to disable any click, you could use jQuery in this way:
$('#element').click(e){
e.preventDefault();
});
Living demo: http://jsfiddle.net/FhCLP/1/
Also, as pointed out by #KyleMit, you can even add the property cursor:not-allowed; if you want to show another cursor to specify the not-allowed state of the cursor.
Living demo: http://jsfiddle.net/FhCLP/2/
Use unbind method:
Unbind:
Removes handlers attached to the elements:
$( "#img li").unbind( "hover" );
If you've attached events to the item, e.preventDefault won't work because you're not stopping the default action. I think what you want to do is call .unbind(). Let's say you attached event handlers all the li elements in the following HTML but you didn't want to fire any events on the second item.
<ul >
<li>Enabled</li>
<li class="prevent">Disabled</li>
</ul>
Using jQuery, you can remove any bindings that have been applied to any items with the prevent class
$('.prevent').unbind();
If it improves clarity, you can style your element with the following CSS
.prevent {
cursor:not-allowed;
}
jsFiddle

How do I add a css class to an <li> element that contains a given ID using jQuery? [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I want to add an active class to the <li> that an ID is in, for example:
<li>text</li>
How can I add a class to the <li> that #foo is in?
$('#foo').parent('li').addClass("yourclass")
$("#foo").closest("li").addClass("bar");
If your <a> tag might be wrapped in other elements, and not a direct child of <li>, parent('li') will not work:
http://jsfiddle.net/PMfVK/
HTML
<ul>
<li><div><a id="foo">Foo</a></div></li>
<li><div><a id="bar">Bar</a></div></li>
</ul>​
JS
$("#foo").closest("li").addClass("foo"); // this will correctly grab the li
$("#bar").parent("li").addClass("bar");​ // this will grab nothing
$('#foo').parent('li').addClass('active');
$("li").has("#foo").addClass("yourclass")
$('a[id]').closest('li').addClass('active');
demo
First select the element with the ID foo using the ID selector. Then, use .parents to select the <li> parent of that element. Use .eq(0) to ensure that only the nearest parent is found. Finally, use addClass to add the class to the <li> element.
Since we are using parent s even if the element with the foo ID is nested several elements below the <li> it will still be selected.
$("#foo").parents("li").eq(0).addClass("bar");​​
See my example on jsFiddle.

Categories