We Keep Coding

is there a better way to write this javascript / jquery?

is there a better way to write this simple on click script?
as you can she there is a consistent number in each block.
instead of duplicating it another 10 times for 10 different list item, is there a better way?
the content is not in a child of the li. so i cant club all of them with (this)
heres the thing im working on:
$( '.artist_li1' ).click(function() {
$( '.artist_content' ).removeClass( "active" );
$( '.artist_content1' ).addClass( "active" );
});
$( '.artist_li2' ).click(function() {
$( '.artist_content' ).removeClass( "active" );
$( '.artist_content2' ).addClass( "active" );
});
$( '.artist_li3' ).click(function() {
$( '.artist_content' ).removeClass( "active" );
$( '.artist_content3' ).addClass.addClass( "active" );
});
and so on....

You can use ^ attribute selector in jQuery like this:
$( '[class^=artist_li]' ).click(function() {
$( '.artist_content' ).removeClass( "active" );
$( '.artist_content1' ).addClass( "active" );
});
[class^=artist_li] matches elements with class attribute starting with artist_li
UPDATE: Use jQuery instead of $ as according to your provided link, you're using jQuery v 1.12
For more help, see code block below
$(function(){
$("[class^=artist_li]").on('click', function() {
alert($(this).text());
});
});
li {
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<ul>
<li class="artist_li1">Click 1</li>
<li class="artist_li2">Click 2</li>
<li class="artist_li3">Click 3</li>
<li class="artist_li4">Click 4</li>
</ul>
</div>
Hope this helps!

You can do for loop:
for(var i = 1; i < 3; i++) {
(function(index) {
$( '.artist_li'+index ).click(function() {
$( '.artist_content' ).removeClass( "active" );
$( '.artist_content'+index ).addClass( "active" );
});
}(i));
}

To give a better / more efficient answer it would be helpful to see your HTML. But I digress, and will suggest the following -
Assuming some HTML structure as follows - You can remove the need for indexing if you work using DOM traversal relative to the clicked element
$(document).on('click', '.artist_li', function(){
$('.artist_content').removeClass('active');
//this will find the child div inside the list element that
//was just clicked. Removing the need for indexing
$(this).children('.artist_content').addClass('active');
});
.active {
color: red;
}
li {
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul> <!-- Adding extra class artist_li to illustrate various method -->
<li class="artist_li1 artist_li">
<div class="artist_content artist_content1 active">Content 1</div>
</li>
<li class="artist_li1 artist_li">
<div class="artist_content artist_content2">Content 2</div>
</li>
<li class="artist_li1 artist_li">
<div class="artist_content artist_content3">Content 3</div>
</li>
</ul>

How to go over every item in an order list using jQuery?

When the page in load/reloaded, I need to loop over each each list item in the order list and apply some logic to it.
Here is what I have done but nothing is being printed in the console as expected.
$(function() {
$(window).load(function(){
//$( "#selected_sortable_control_570_0 li").each(function(index)
//$( "#selected_sortable_control_570_0 > li").each(function(index)
$( "ul.selected_sortable_control_570_0 > li").each(function(index)
{
console.log( $( this ).attr('id') );
});
});
});
Here is my HTML markup
<ul id="selected_sortable_control_570_0">
<li id="test1">Test 1</li>
<li id="test2">Test 2</li>
<li id="test3">Test 3</li>
</ul>
How can I correctly loop over each item?

UL has id -> id="selected_sortable_control_570_0"
Use ul#selected_sortable_control_570_0 > li as selector in $ function.
Working snippet
$(function() {
//$( "#selected_sortable_control_570_0 li").each(function(index)
//$( "#selected_sortable_control_570_0 > li").each(function(index)
$("ul#selected_sortable_control_570_0 > li").each(function(index) {
console.log($(this).attr('id'));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="selected_sortable_control_570_0">
<li id="test1">Test 1</li>
<li id="test2">Test 2</li>
<li id="test3">Test 3</li>
</ul>
Note: Window load is not needed. Run the snippet it works.

selected_sortable_control_570_0 is an id in HTML but in your jQuery you are using a class selector. Change .selected_sortable_control_570_0 to #selected_sortable_control_570_0.

$( "li").each(function(index,value)
{
console.log(value.id);
});
COdepen URL for reference- http://codepen.io/nagasai/pen/rLxzJE
added value and value.id will give id of each li and you can logic using each id

Add If else condition to click function

I would like do something like that with Jquery, make condition to click function :
$(document).ready(function(){
if {
$("li#menu-item-1101").click(function(){
$( '#menu-item-1101' ).addClass( 'current_page_item' );
}else{ // I clik on another <li> than #menu-item-1101 I remove current_page_item class
$( '#menu-item-1101' ).removeClass( 'current_page_item' );
}
});
});
Anyone can help me please?
Thank you!!

I think you want logic something similar to this:
On click of li you want to check the id of it and add/remove class accordingly:
$(document).ready(function(){
$("li").click(function(){
if($(this).attr("id") == "menu-item-1101")
{
$(this).addClass( 'current_page_item' );
}
else
{
$( '#menu-item-1101' ).removeClass( 'current_page_item' );
}
});
});

it is possible by adding an id to each <li> element and write a generic jquery function with if else.
html:
<ul class="nav">
<li id='itm1'>item 1</li>
<li id='itm2'>item 2</li>
<li id='itm3'>item 3</li>
</ul>
script:
$('.nav li').click(function(){
var id=$(this).attr('id');
if(id=='itm1'){//first li clicked}
else if(id=='itm2'){//second li clicked}
else{//third li clicked}
})

As you are doing the code it seem that you have to set lots of li conditions. But you can do it like:
HTML Part :
<ul class="nav">
<li id='menu-item-1101'>item 1</li>
<li id='menu-item-1102'>item 2</li>
<li id='menu-item-1102'>item 3</li>
</ul>
jQuery Part :
$(function(){
$(".nav li").click(function(){
if($(".nav li").hasClass("current_page_item")){
$(".nav li").removeClass("current_page_item");
}
$(this).addClass("current_page_item");
})
})

How to get selected value from jquery selectable widget

I can't figure out how to get data from the selected element once a user selects a box from the widget.
I'm using the selectable widget from jquery:
https://jqueryui.com/selectable/#display-grid
my html:
<ol id="Numbers">
<li class="ui-state-default">1</li>
<li class="ui-state-default">2</li>
<li class="ui-state-default">3</li>
<li class="ui-state-default">4</li>
<li class="ui-state-default">5</li>
<li class="ui-state-default">6</li>
<li class="ui-state-default">7</li>
<li class="ui-state-default">8</li>
<li class="ui-state-default">9</li>
<li class="ui-state-default">10</li>
</ol>
I don't understand how to use the selected api at:
https://api.jqueryui.com/selectable/#event-selected
Tried to use an onclick on the li's but that didn't seem to work:
function testvar() {document.getElementByClass('.ui-selected').innerHTML = "CLICKED ME!";
}

It would help if you said what you want to do with it:
http://jsfiddle.net/MfegM/2088/
$( "#Numbers" ).selectable({
selected: function( event, ui ) {
var el = $(ui.selected);
var num = el.html();
$('#result').html("You've selected "+num);
}
});

Not sure how much help you'll get without more info on what you're trying to accomplish...
<head>
<script>
$( "#Numbers" ).selectable({
selected: function( event, ui ) {}
});
$( "#Numbers" ).on( "selectableselected", function( event, ui ) {} );
</script>
</head>

$("#Numbers").on('click', '.ul-state-default ', function(){
alert($(this).val());
})

how to set active class to nav menu from twitter bootstrap

I'm new to the twitter bootstrap. Using there navigation menus . I'm trying to set active class to selected menu.
my menu is -
<div class="nav-collapse">
<ul class="nav">
<li id="home" class="active">Home</li>
<li>Project</li>
<li>Customer</li>
<li>Staff</li>
<li id="broker">Broker</li>
<li>Sale</li>
</ul>
</div>
I tried following thing after googling on this that i have to set active class on each page from menu like as--
<script>
$(document).ready(function () {
$('#home').addClass('active');
});
</script>
but problem for above is that i set home menu selected by default. Then it always get selected. Is there any other way to do this ? , or which i can generalize and keep my js in layout file itself?
After executing application my menu looks -
after clicking on other menu item i get following result-
And i added following scripts on Index view and Broker view ---
<script>
$(document).ready(function () {
$('#home').addClass('active');
});
</script>
<script>
$(document).ready(function () {
$('#broker').addClass('active');
});
</script>
respectively.

You can use this JavaScript\jQuery code:
// Sets active link in Bootstrap menu
// Add this code in a central place used\shared by all pages
// like your _Layout.cshtml in ASP.NET MVC for example
$('a[href="' + this.location.pathname + '"]').parents('li,ul').addClass('active');
It'll set the <a>'s parent <li> and the <li>'s parent <ul> as active.
A simple solution that works!
Original source:
Bootstrap add active class to li

it is a workaround. try
<div class="nav-collapse">
<ul class="nav">
<li id="home" class="active">Home</li>
<li>Project</li>
<li>Customer</li>
<li>Staff</li>
<li id="demo">Broker</li>
<li id='sale'>Sale</li>
</ul>
</div>
and on each page js add
$(document).ready(function () {
$(".nav li").removeClass("active");//this will remove the active class from
//previously active menu item
$('#home').addClass('active');
//for demo
//$('#demo').addClass('active');
//for sale
//$('#sale').addClass('active');
});

I had the same problem... solved it by adding the code shown below to the Into "$(document).ready" part of my "functions.js" file which is included in every page footer. It's pretty simple. It gets the full current URL of the displayed page and compares it to the full anchor href URL. If they are the same, set anchor (li) parent as active. And do this only if anchor href value is not "#", then the bootstrap will solve it.
$(document).ready(function () {
$(function(){
var current_page_URL = location.href;
$( "a" ).each(function() {
if ($(this).attr("href") !== "#") {
var target_URL = $(this).prop("href");
if (target_URL == current_page_URL) {
$('nav a').parents('li, ul').removeClass('active');
$(this).parent('li').addClass('active');
return false;
}
}
}); }); });

For single-page sites where the menu items simply jump down to other sections of the page, this simple solution works for me:
$('.nav li').on('click', function(){
$('.nav li').removeClass('active');
$(this).addClass('active');
});

You could add a diffrent class onto the BODY tag on each page e.g. on the homepage you could have this:
<body class="nav-1-on">
Then this css:
.nav-1-on .nav-1 a, .nav-2-on .nav-2 a, .nav-3-on .nav-3 a, .nav-4-on .nav-4 a {
// set your styles here
}
The NAV element:
<ul>
<li class="nav-1">Home</li>
<li class="nav-2">Services</li>
<li class="nav-3">About</li>
<li class="nav-4">Contact</li>
</ul>
#
Alternatively you could place a class on the BODY on each page and then grab that via jQuery and add the .active class to the correct nav item based on that tag.

<div class="nav-collapse">
<ul class="nav">
<li class="home">Home</li>
<li class="Project">Project</li>
<li class="Customer">Customer</li>
<li class="Staff">Staff</li>
<li class="Broker">Broker</li>
<li class="Sale">Sale</li>
</ul>
</div>
then for each page you add this:
//home
$(document).ready(function () {
$('.home').addClass('active');
});
//Project page
$(document).ready(function () {
$('.Project').addClass('active');
});
//Customer page
$(document).ready(function () {
$('.Customer').addClass('active');
});
//staff page
$(document).ready(function () {
$('.Staff').addClass('active');
});

<div class="nav-collapse">
<ul class="nav">
<li class="home">Home</li>
<li class="Project">Project</li>
<li class="Customer">Customer</li>
<li class="Staff">Staff</li>
<li class="Broker">Broker</li>
<li class="Sale">Sale</li>
</ul>
</div>
$('ul.nav>li.home>a').click(); // first. same to all the other options changing the li class name

For single page sites, the following is what I used. It not only sets the active element based on what's been clicked but it also checks for a hash value within the URL location on initial page load.
$(document).ready(function () {
var removeActive = function() {
$( "nav a" ).parents( "li, ul" ).removeClass("active");
};
$( ".nav li" ).click(function() {
removeActive();
$(this).addClass( "active" );
});
removeActive();
$( "a[href='" + location.hash + "']" ).parent( "li" ).addClass( "active" );
});

For those using Codeigniter, add this below your sidebar menu,
<script>
$(document).ready(function () {
$(".nav li").removeClass("active");
var currentUrl = "<?php echo current_url(); ?>";
$('a[href="' + currentUrl + '"]').parents('li,ul').addClass('active');
});
</script>

(function (window) {
bs3Utils = {}
bs3Utils.nav = {
activeTab: function (tabId) {
/// <summary>
/// 设置需要展现的tab
/// </summary>
/// <param name="tabId"></param>
$('.nav-tabs a[href="#' + tabId + '"]').tab('show');
}
}
window.bs3Utils = bs3Utils;
})(window);
example:
var _actvieTab = _type == '0' ? 'portlet_tab2_1' : 'portlet_tab2_2';
bs3Utils.nav.activeTab(_actvieTab);
<ul class="nav nav-tabs">
<li class="active">
箱-单灯节点
</li>
<li>
箱-灯组节点
</li>
</ul>

$( ".nav li" ).click(function() {
$('.nav li').removeClass('active');
$(this).addClass('active');
});
check this out.

I am using Flask Bootstrap.
My solution is a little bit simpler because my template already receives the option or choice as a parameter from Flask.
var choice = document.getElementById("{{ item_kind }}");
choice.className += "active";
First line, js code gets the element. So, you should identify each of the elements with a id. I'll show an example below.
Second line, you add the class active.
You can see html ids below.
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>
<a id="speed" href="{{ url_for('list_gold_per_item',item_kind='speed',level='2') }}">
<h2>Speed</h2>
</a>
</li>
<li>
<a id="life" href="{{ url_for('list_gold_per_item',item_kind='life',level='3') }}">
<h2>Life</h2>
</a>
</li>
</ul>
</div>

I just added a custom class to the ul section named target-active
<ul class="nav navbar-nav target-active">
<li>HOME</li>
<li>FIND A TRUCK</li>
<li>OUR SERVICES</li>
<li>ABOUT US</li>
</ul>
If each li tags click get a new page from different place or same place, no need to add jquery removeClass function.
Add simple one line jquery code to each page to get your desired result
1st link page
$(function(){
$(".target-active").find("[href='/']").parent().addClass("active");
});
2nd link page
$(function(){
$(".target-active").find("[href=find-truck]").parent().addClass("active");
});
3rd link page
$(function(){
$(".target-active").find("[href=our-service]").parent().addClass("active");
});
4th link page
$(function(){
$(".target-active").find("[href=about-us]").parent().addClass("active");
});