changing value of unordered list when selecting li item - javascript

My question is, how do i change value of original element in UL list, after selecting/picking one li item under.
Example: I want to pick City3 and when i do, instead of "Pick City" it should be the value of "city3".
This is my jsfiddle.
This is HTML:
<div class="menu1">
<li class="naslov"><b>Pick City</b></li>
<div class="submenu1">
<ul id="sel">
<li value="1"><b>City1</b></li>
<li value="2"><b>City2</b></li>
<li value="3"><b>City3</b></li>
<li value="4"><b>City4</b></li>
<li value="5"><b>City5</b></li>
</ul>
</div>
Also is it possible not to change any of the css/html(With that i mean, i dont want to add select,option elements), and make it work just over some JQuery/JS functions?
Thanks,
Milos

$('#sel a').click(function(){
$('li.naslov b').html(this.innerHTML);
return false;
});
Live DEMO

Try this as your JS...
$(document).ready(function(){
$('.menu1').hover(function(){
$('.submenu1').stop(true).slideToggle('slow');
});
var orig = $(".naslov").html();
$("#sel li").hover(function(){
$(".naslov").html($(this).text());
}, function(){
$(".naslov").html(orig);
});
});

Another possible way to do this. In this case, the li could be dynamic, based on an AJAX feed or some other JavaScript.
$('#sel').on('click','li',function() {
$('li.naslov b').text($(this).text());
});
jsFiddle

Related

Merge jquery code with several classes and ids

I have lots of repeated Jquery code with small differences. I wonder if its possible to merge the following Jquery code into one:
$(".dropdown-menu-attributes li a").click(function(){
$("#modal-button-attributes:first-child").text($(this).text());
});
$(".dropdown-menu-operators li a").click(function(){
$("#modal-button-operators:first-child").text($(this).text());
});
$(".dropdown-menu-and-or li a").click(function(){
$("#modal-button-and-or:first-child").text($(this).text());
});
I tried this but doesn't work for the second and third classes.
$(".dropdown-menu-attributes .dropdown-menu-and-or .dropdown-menu-operators li a").click(function(){
$("#modal-button-attributes:first-child #modal-button-operators:first-child #modal-button-and-or:first-child").text($(this).text());
});
You want to use the , (Multiple Selector) selector:
$(".dropdown-menu-attributes,.dropdown-menu-and-or,.dropdown-menu-operators")
to first find those three elements, and then on the result set you would do another search to find the li a. The final code would look that way:
$(".dropdown-menu-attributes,.dropdown-menu-and-or,.dropdown-menu-operators")
.find('li a')
.click(function(){
});
To get the correct id you would need to store that id somewhere. One way would be to add it to the corresponding element that holds those classes using the data-* attribute. And search for that using closest
$(".dropdown-menu-attributes,.dropdown-menu-and-or,.dropdown-menu-operators")
.find('li a')
.on('click', function(e) {
var id = $(this).closest('[data-modal-button-id]').data().modalButtonId;
console.log('#modal-button-'+id+':first-child');
$('#modal-button-'+id+':first-child').text($(this).text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown-menu-attributes" data-modal-button-id="attributes">
<ul>
<li><a>test1</a></li>
</ul>
</div>
<div class="dropdown-menu-and-or" data-modal-button-id="and-or">
<ul>
<li><a>test2</a></li>
</ul>
</div>
<div class="dropdown-menu-operators" data-modal-button-id="operators">
<ul>
<li><a>test3</a></li>
</ul>
</div>
How you want to name the data-* attribute depends on you, there is most likely a better name for that.
In general I would choose another setup and use a common class instead
$('.dropdown-menu li a')
.on('click', function(e) {
var id = $(this).closest('.dropdown-menu').data().modalButtonId;
console.log('#modal-button-'+id+':first-child');
$('#modal-button-'+id+':first-child').text($(this).text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown-menu dropdown-menu-attributes" data-modal-button-id="attributes">
<ul>
<li><a>test1</a></li>
</ul>
</div>
<div class="dropdown-menu dropdown-menu-and-or" data-modal-button-id="and-or">
<ul>
<li><a>test2</a></li>
</ul>
</div>
<div class="dropdown-menu dropdown-menu-operators" data-modal-button-id="operators">
<ul>
<li><a>test3</a></li>
</ul>
</div>

JQuery each function toggle class

So i have some code like this
<ul>
<li>Example</li>
<li>Example</li>
<li>Example
>
<div class="Menu" style="display:none;">
Some thing
</div>
</li>
<li>Example
>
<div class="Menu" style="display:none;">
Some thing
</div>
</li>
<li>Example</li>
</ul>
Then i use a JS code like this
$("ul li .SplitCtrl").each(function(index) {
$(this).on("click", function(){
$(".Menu").fadeIn(800).slideDown(800);
});
});
But when i using this, all the ".Menu" element will be fade in :(
Please correct my code...
You need to target the specific .Menu that is the one next to this. ELse it will target all element with .Menu class. You can use jquery next
$("ul li .SplitCtrl").each(function(index) {
$(this).on("click", function(){ //changed here
$(this).next(".Menu").fadeIn(800).slideDown(800);
});
});
Check out this JSFIDDLE
jQuery doesn't know which element to open because there are no id's assigned to the menu items. So it opens everything in the .SplitCtrl class because it doesn't know any better. If you assign some id's to the elements, then it will know what to open and when. Using your code so as to minimize modifications, the following will work for you. Note the addition of id's to both of the .SplitCtrl items and the .Menu items, and using the click function and passing in the id of the item that the click originated from. If you embed further elements, this will still work in the case that it isn't the next element following your class, or if you want it to trigger other items on the page in addition to the menu items.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
</head>
<body>
<ul>
<li>Example</li>
<li>Example</li>
<li>Example
>
<div class="Menu" id="menu1" style="display:none;">
Some thing
</div>
</li>
<li>Example
>
<div class="Menu" id="menu2" style="display:none;">
Some thing
</div>
</li>
<li>Example</li>
</ul>
<div id="surprise1" style="display:none;">Now I'm open too!</div>
</body>
</html>
<script>
$(document).ready(function() {
$("ul li .SplitCtrl").click(function(event){
var item = '#menu' + event.target.id;
var surprise = '#surprise' + event.target.id;
$(item).fadeIn(800).slideDown(800); // open the menu item
$(surprise).fadeIn(800).slideDown(800); // open another element
});
});
</script>
In order to toggle the items, you can add something that first hides everything that's open and then makes the newly selected item visible:
//...same code as above to this point
<div id="surprise1" class="Surprise" style="display:none;">Now I'm open too!</div>
</body>
</html>
<script>
$(document).ready(function() {
$("ul li .SplitCtrl").click(function(event){
var item = '#menu' + event.target.id;
var surprise = '#surprise' + event.target.id;
$(".Menu").fadeOut(100); // Hide all items of class .Menu
$(".Surprise").fadeOut(100); // Hide other items of class .Surprise
$(item).fadeIn(800).slideDown(800); // open the menu item
$(surprise).fadeIn(800).slideDown(800); // open another element
});
});
</script>
So now, all the .Menu items in that class are toggled off before the new one is displayed (even though only one displays at a time). Note the added class for "Surprise" to be able to hide all the external elements as well. There are lots of ways to toggle items so this is just one way you could accomplish it.

Display active tab's name in an span

I would like to show the active tab's name (text) in a span .active-class.
Example:
<ul class="tabs">
<li class="feinleinen active">feinleinen</li>
<li class="glatt">glatt</li>
</ul >
<span class="active-class">*Active_Tab_Name_Here (i.e. feinleinen) *</span>
What you want is either to have a click event each time a link is clicked and put the text in there?
Javascript:
function changeSpan(var newText){
document.getElementByClassName('active-class').innterHTML(newText);
}
When the above you need to initialise the function. this can be done in the anchor within the list item.
<li><a href='#' onclick='changeSpan("new item name!");'>
Don't forget the hash (#) within the href! This stops the default action, in layman's terms.
With jQuery this can be a bit simpler
$('a','ul.tabs>li').click(function(){//a classname would be a better selector
$('.active-class').appendTo($(this).innerHTML());//can also use $(this).text();
return false;//also stops default action
});
FIDDLE:
HTML
<ul class="tabs">
<li class="feinleinen active">feinleinen
</li>
<li class="glatt">glatt
</li>
</ul>
<span class="active-class">active tab name here</span>
SCRIPT
$('.active-class').text($('.tabs .active').find('a').text());
I guess you want this on click , therefore bit updation to my above code here :-
$('.tabs a').click(function () {
$('.tabs li').removeClass('active');
$(this).parent('li').addClass('active');
$('.active-class').text($(this).text());
});
fiddle: http://jsfiddle.net/x97g8sc7/
$(".active-class").text($(".tabs .active").text());

Get only direct element value with jquery

Lets say I have the following for my menu:
$(document).ready(function() {
alert($('ul li').html());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="menu">
<li><i class="font-icon"></i> Users
<ul>
<li>Overview</li>
</ul>
</li>
</ul>
As you can see as a return I get:
<i class="font-icon"></i> Users
<ul>
<li>Overview</li>
</ul>
Now the problem is that I'm only interested in: <i class="font-icon"></i> Users. Is there a way to only get that as a return without putting it in a div or span? I already tried with .text() but this only gave me the actual text Users (obviously).
Thanks in advance
I think this could be the solution: DEMO
$(document).ready(function() {
var i=$('ul li').html();
var ul=$('ul li').find('ul')[0].outerHTML;
i=i.replace(ul,'');
alert(i);
});
Use the remove() method. It's removes child elements matching a selection:
$(document).ready(function() {
var elem = $('ul li').html().remove('ul');
alert(elem);
});

Traversing to the element closest to the element clicked jquery

I have this kind of setup in my html
<section class="grp">
<ul class="normal">
<li>Normal Thing <button class="toggle-advanced">toggle advanced</button></li>
</ul>
<ul class="advanced">
<li>This is Advanced</li>
</ul>
</section>
<h1>Another Thing</h1>
<section class="grp">
<ul class="normal">
<li>Normal Thing <button class="toggle-advanced">toggle advanced</button></li>
</ul>
<ul class="advanced">
<li>This is Advanced</li>
</ul>
</section>
How can I toggle the "advanced" ul if I clicked the button in ul.normal?
I tried it like this in coffeescript
$('.normal').on 'click', '.toggle-advanced', (e) ->
$(#).closest('.grp').siblings('.advanced').slideToggle();
since jquery is tagged... using jquery
$('.toggle-advanced').click(function(){
$(this).parents('ul.normal').siblings('ul.advanced').toggle();
});
or
$('.toggle-advanced').click(function(){
$(this).parents('.grp').find('ul.advanced').toggle();
});
these should work unless you aree adding the content dynamically.. use on() if added dynamically
$('.normal').on('click', '.toggle-advanced', function(){
$(this).parents('.grp').find('ul.advanced').toggle();
});
.advanced is not a sibling of .grp element, it is the sibling of the parent .normal element
$(#).closest('.normal').siblings('.advanced').slideToggle();
The javascript equal will be
$('.normal').on('click', '.toggle-advanced', function(){
$(this).closest('.normal').siblings('.advanced').slideToggle();
})
you can try this
$(".toggle-advanced").on('click', function(){
$(this).closest(".normal").siblings('.advanced').slideToggle();
});
this code is jquery based
In Jquery, you can use parent and siblings functions to get to the desired element.
Try this:
$('.toggle-advanced').click(function() {
$('this').parent().siblings().toggleSomething()
});
siblings returns all the siblings for given element, which in your case will always return "advanced" ul.
This should work.
$("ul.normal>li>button").click(function () {
$(this).closest('.normal').siblings('.advanced').slideToggle();
});
Working example: http://jsfiddle.net/riri78/dQcFE/

Categories

Resources