how to select a li a based on the text using jQuery - javascript

How can I select a given li a element so that it is selected by default?
Please refer to this question to see the example that I'm working with...
How can I navigation up and down a ul using two buttons?
Basically I need to select the Patient Test li a item by default.

Try this:
$(function(){
$("#MainMenu li:contains('PATIENT TEST')").click();
});

You could do something like this
$('li a').each(function(){
if($(this).text() == 'PATIENT TEST'){
//do something here
}
});
Example: http://jsfiddle.net/jasongennaro/uuaKH/

Try:
<script type="text/javascript">
$(function() {
$('#MainMenu li > a').eq(0).focus()
});
</script>

set in the loaded html, since the next click will remove and reset the "status", based on the other post
<div id="MainMenu">
<ul>
<li class="menuActive">PATIENT TEST</li>
<li>QC TEST</li>
<li>REVIEW RESULTS</li>
<li>OTHER</li>
</ul>
</div>

I just had to create an ID for each li and then use jQuery addClass and removeClass to swap the classes.
$("#repeatMenuItem").removeClass("active");
$("#deleteMenuItem").removeClass("active");
$("#okMenuItem").addClass("active");

Related

Add span to each element of list

I have a list like this
<ul class="example">
<li>Something</li>
<li>Something</li>
</ul>
The result should be like this
<ul class="example">
<li><span></span>Something</li>
<li><span></span>Something</li>
</ul>
Please help me.
Append a span at the beginning using prepend() method.
$('ul.example li a').prepend('<span></span>')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="example">
<li>Something</li>
<li>Something</li>
</ul>
You can use each() to loop each a element and change its html. DEMO
$('.example li a').each(function() {
$(this).html('<span></span>' + $(this).text())
})
You can simply do this.
$(".example li a").each(function() {
$(this).html(function(i, origText){
return "<span></span>" + origText;
});
});
Here origText contains existing inner elements. Here is the reference JQuery Tutorial
This method is very useful even when you have lot of content inside a div.
Hope that helps :)

changing active class for list element

I'm trying to change the 'active' class for the clicked list item but I'm missing something. Here is what my HTML and jquery look like:
HTML
<ul class="additional-menu">
<li class="active"> Link1</li>
<li>Link2</li>
<li>Link3</li>
</ul>
jQuery
$("#link2").click(function(){
if ($(this).find('#additional-menu li').hasClass('active')) {
//console.log("Active class seen");
$(this).find('#additional-menu li').removeClass('active');
$(this).addClass('active');
}
});
Any idea what I'm missing? I'm not even detecting the active class at this point...
You could minimize your code to just
$('.additional-menu').on('click','li', function(){
$(this).addClass('active').siblings().removeClass('active');
});
Demo at http://jsfiddle.net/DvHBp/
There are many problems in the code
//from what i can understand you need to change the active class to the clicked li element not just the link2 element
$("#link2").click(function(){
// additional-menu is not an id it is a class and it is not a descendant of the li element
if ($(this).find('#additional-menu li').hasClass('active')) {
//console.log("Active class seen");
$(this).find('#additional-menu li').removeClass('active');
//if you are using a if statement then addClass should be outside the if block
$(this).addClass('active');
}
});
try
jQuery(function(){
var $lis = $('.additional-menu > li').click(function(){
$lis.removeClass('active');
$(this).addClass('active')
});
})
find() get the descendants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element.
You should use
$(this).parent().siblings('#additional-menu li')
because in your html structure #link2 a tag has no descendant of #additional-menu li
You can make something very generic:
<ul class="additional-menu">
<li class="active"> Link1</li>
<li>Link2</li>
<li>Link3</li>
</ul>
And using this JavaScript:
$(function(){
$('.additional-menu > li').click(function(){
$('.additional-menu > li').removeClass('active');
$(this).addClass('active');
});
});
Try this solution :
HTML:
<ul class="additional-menu">
<li><a id="link1" href="link1"> Link1</a></li>
<li>Link2</li>
<li>Link3</li>
</ul>
CSS:
.active{
background-color : red;
}
jQuery:
//on first time load set the home menu item active
$(".additional-menu a#link1").addClass("active");
//on click remove active class from all li's and add it to the clicked li
$("a").click(function(){
$("a").removeClass("active");
$(this).addClass("active");
});
Demo

id manipulation in jQuery

Say I have a unordered list of item1, item2, item3, item4, each with a div around it.
<ul>
<div><li>item1</li></div>
<div class="current"><li>item2</li></div>
<div><li>item3</li></div>
<div><li>item4</li></div>
</ul>
I want that every time I click itemX, it loads itemX.html and give the div around itemX a current class attribute. Currently I'm writing 4 functions separately for four items, and they look almost the same. So how can I write a general function that just works on any itemX, loads itemX.html and changes its div's attribute? My current code seems so redundant.
Assuming that you've fixed the HTML problem(li should be sub element of ul). But still for such problem, you need to do:
$("li").click(function() {
$(".current").removeClass("current");
$(this).parent().addClass("current");
});
But the correct solution is :
HTML :
<ul>
<li>item1</li>
<li class="current">item2</li>
<li>item3</li>
<li>item4</li>
</ul>
JS:
$("li").click(function() {
$(".current").removeClass("current");
$(this).addClass("current");
});
And add some css to your li
Your HTML is invalid, which will continue to cause problems for you. Try adding css padding to your LI elements to increase the click area:
<style>
li { padding:10px; }
</style>
As to your question:
<ul id="targetElement">
<li data-contentName="item1.html">item one</li>
<li data-contentName="item2.html">item two</li>
<li data-contentName="item3.html">item three</li>
<li data-contentName="item4.html">item four</li>
</ul>
<script type="text/javascript">
$('#targetElement li').click(function(){ //for all li elements in #targetElement, do this on click
//remove the active class from the other li's
$('#targetElement li').removeClass('current');
//jQuery wrap the current li
var $this = $(this);
//add the class to the current li (the one that was clicked)
$this.addClass('current');
//get the name of the file to load
var fileToLoad = $this.data('contentName');
//then go about loading the file...
});
</script>
$("div li").on('click',function(){
$(this).siblings().removeClass("current");
$(this).load($(this).text() + ".html").closest("div").addClass("current");
});
Your question isn't clear, and your html isn't valid. so let me venture a guess at what your trying to do.
<ul class="pages"><li>item</li><li>item2</li><li>item3</li></ul>
$(function(){
$('ul.pages li').click(function(){
// load html - not user what you mean, so how ever your doing your page load.
$(this).addClass('someclass');
});
});
Is this what you where looking for?

jQuery hide li tag

I've html like this. I want to only show first li tags and don't want to show span. How to do this with jquery?
<div id="div1">
<ul class="class2">
<li class="class3"><span class="sfBreadcrumbNodeSeparator">/</span> </li>
<li class="class3"> </li>
<li class="class3"> </li>
</ul>
</div>
$('.class2 li').not(':first').hide(); will hide all but the first list items, $('.class2 li:first span').hide(); will hide the span. See http://jsfiddle.net/jhfrench/agga6/4/.
Or you can do it all in one line using $('.class2 li:not(":first")' || '.class2 li:first span').hide();. See http://jsfiddle.net/jhfrench/agga6/5/
If you just want to hide the span, you can do
$('.sfBreadcrumbNodeSeparator').hide()
or give it an id value in the markup, and select based on the id value.
Hi You can use this.
$('.sfBreadcrumbNodeSeparator').hide();
or this for first li of ul
$('.class2 li:first span').hide();
You can try :
<script>
$('div#div1 ul li:first-child span').hide();
</script>

Show and hide <div>s with jQuery event

There are several advanced jQuery plugins which filter <div>s by corresponding id or class. This is indeed based on a simple jQuery idea, but I am not sure how to implement it. Consider a menu to show/hide the content as
<ul id="filters" class="menu" indicator="filter">
<li>All</li>
<li>First</li>
<li>Third</li>
</ul>
and we want to control the display of contents:
<div class="box first">Something</div>
<div class="box first third">Something</div>
<div class="box third">Something</div>
What is the simplest jQuery Javascript code to do so?
By default, all <div>s are shown, when we click on a <li> from menu (e.g. FIRST), jQuery will filter the <div>s to only show <div>s in which the class is "first".
Don't use attribute "indicator" as it doesn't exist. Use the class element as below. Also the A elements are not needed.
<ul id="filters" class="menu">
<li class="selected all">All</li>
<li class="first">First</li>
<li class="third">Third</li>
</ul>
Then your script
// hide all divs
$('div.box').css('display','hidden');
// add click handler on control list
$('ul#filters li').click(function() {
var classList =$(this).attr('class').split(/\s+/);
$.each( classList, function(index, item){
if (item != 'selected') {
$('div.'+item).css('display','block');
}
});
});
$(function(){
$('#filters li a').live('click', function(){
$('.box').hide();
indirector = $(this).attr('indicator');
indirector = indirector.substring(1);
if(indirector == '')
$('.box').show();
else
$('div.' + indirector).show();
});
});
Reference
Use the class attribute instead of indicator and try the following:
$('#filters li').click(function(){
$('div.' + $(this).attr('class')).show();
});
for this to work you would have to assign an all class to your first LI as well as all of your DIVs. Hope this helps!
try this code,
$('#filters li').click(function(){
$("div.box").hide();
$('div.box' + $(this).children('a').attr('indicator')).show();
});

Categories