Merge jquery code with several classes and ids - javascript

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>

Related

How can I select the first specific inner element?

Here is my HTML?
<ul>
<li>
<a href="./link1">
<div>something</div>
<span>link</span>
</a>
</li>
</ul>
And this is my jQuery code:
$('li').on('click', function(){
var link = $(this).find('a').attr('href');
})
As you see, there is two <a> tags. And .find() refersh to both of them. While I just want to select the <a> which is right inside (one level) in the <li> tag. So expected result is ./link.
What alternative should I use instead of .find() ?
You can use the direct descendant selector.
$('li').on('click', function(){ var link = $(this).find('> a').attr('href'); })
Try with eq(0) .It will get the first a tag
Or
Do with first('a')
$(this).children().first('a').attr('href')
$('li').click(function(){
console.log($(this).children('a').eq(0).attr('href'))
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>click
<a href="./link1">
<div>something</div>
<span>link</span>
</a>
</li>
</ul>
Method 1: Using Jquery's children and first
$('#myList').on('click', function() {
var link = $('#myList').children('a').first();
console.log(link.attr('href'));
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<ul>
<li id="myList">
<a href="./link1">
<div>something</div>
<span>link</span>
</a>
</li>
</ul>
Method 2: Using the immediate children selector >
$('#myList').on('click', function() {
var link = $('li > a:first');
console.log(link.attr("href"));
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<ul>
<li id="myList">
<a href="./link1">
<div>something</div>
<span>link</span>
</a>
</li>
</ul>
the first specific element
What alternative should I use instead of .find() ?
$(this).find('a:first')
seems like only logical solution and easy to read by developer
Don't do so. How is the browser meant to know which link to follow? It'd be invalid HTML
I suggest you using this instead:
startmiddleend
As you can see start and end are linked to page1 but the middle points to page2.

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.

Trigger event with same ID elements

I have a menu list that refer to different projects.
Each list item shares its "ID" with a project showcased in a gallery.
<div class="menu">
<ul>
<li id="id1">project 1</li>
</ul>
</div>
<div class="gallery">
<div class="proc id="id1">project 1</div>
</div>
I'd like a jQuery function that :
When a list item from the menu is clicked, gets the project with the same id to do something.
I really don't know where to start from and I'm stuck at that :
<script>
$( "li#id1").click(function() {
$( ".project#id1" ).show();
});
</script>
Many thanks
As the comments said the IDs must be unique and you have missing quote.
You can use data attributes to handle your logic or combination of ids and data attributes.
Try something like this:
HTML
<div class="menu">
<ul>
<li data-project-id="first-project-id">project 1</li>
...
</ul>
</div>
<div class="gallery">
<div class="proc" data-project-id="first-project-id">project 1</div>
</div>
JavaScript
$('.menu li').click(function(){
var targetId = $(this).attr('data-project-id');
$('.proc[data-project-id="' + targetId + '"]').show();
});
The click event is attached to every li item in the element with class .menu.
On click event we extract the data-project-id attribute from the clicked element, find the project elemenet from gallery and show it.
JSFiddle Demo
you can use normal id also (as selector)
HTML
<div class="menu">
<ul>
<li id="first-project-id">project 1</li>
...
</ul>
</div>
<div class="gallery">
<div class="proc" id="first-project-id">project 1</div>
</div>
jQuery
$('.menu li').click(function(){
var targetId = $(this).attr('id');
$('.proc[id="' + targetId + '"]').toggle();
});

changing value of unordered list when selecting li item

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

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