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>

In Jquery UI using sortable and selectable. while sort an element it shows an id of them

In Jquery UI using sortable and selectable, i drag the element it shows the id of the dragged element using selectable.(using two field while i drag one element and to drop it in other .it shows the id of the dragged element)
Here is the html code.
<span>You've selected:</span> <span id="select-result">none</span>
<ul id="sortable1" class="connectedSortable">
<li ><img src="./images/tirein.png"><span>tier 1</span></li>
<li><img src="./images/tirein.png"><span>tier 2</span></li>
<li><img src="./images/tirein.png"><span>tier 3</span></li>
</ul>
<ul id="sortable2" class="connectedSortable">
</ul>
here is the Jquery.
$(function() {
$( "#sortable1a, #sortable2a" ).sortable({
connectWith: ".connectedSortable"
});
$("#sortable1, #sortable2" ).selectable({
stop: function() {
var result = $( "#select-result" ).empty();
$( ".ui-selected", this ).each(function() {
var index = $( "#sortable1 li" ).index( this );
result.append("image" + ( index + 1 )+ " has moved" );
});
}
});
});

Applying custom action on jquery effect

I'm using jquery easing effect and right now I have following code
$(document).ready(function() {
$.easing.def = "easeOutBounce";
$('#myDiv ul li.submenu a.title').click(function(e) {
var dropDown = $(this).parent().next();
$('.submenu_items').not(dropDown).slideUp('slow');
dropDown.stop(false, true).slideToggle('slow');
e.preventDefault();
});
});
using this js code all list items inside unordered list at #myDiv are unwrapped. What I'm trying to achive is to send from my controller some string which will represent div identifier, so instead of #myDiv should be dynamic value sent from controller. Under that div all items should be unrapped and all other should be hidden (wrapped).
DivOne
List item
List item two
DivTwo
DivThree
UPDATED QUESTION
Dom structure is following
<!-- menu one -->
<ul>
<li id="first_menu" class="submenu">
FIRST MENU
</li>
<li class="submenu_items" style="display: list-item;">
<ul class="nomargin">
<li>LINK ONE
<ul>
<li>LINK TWO</li>
</ul>
</li>
</ul>
</ul>
<!-- / menu one -->
<!-- menu two -->
<ul>
<li id="second_menu" class="submenu">
SECOND MENU
</li>
<li class="submenu_items" style="display: list-item;">
<ul class="nomargin">
<li>LINK THREE
<ul>
<li>LINK FOUR</li>
</ul>
</li>
</ul>
</ul>
<!-- / menu two -->
I want on page load to unwrapped all list items from lets say FIRST MENU, and items from SECOND MENU to remain wrapped (this should wait onclick event, but that's not the issue right now).

Is this the effect you were after:
JSFIDDLE
$(document).ready(function() {
$.easing.def = "easeOutBounce";
var submenus = $( '.submenu_items' );
$( 'div.menu ul li.submenu' ).each( function(){
var submenu = $( this ),
dropdown = submenu.next(),
items = submenus.not( dropdown );
$( 'a.title', submenu ).click( function(e){
items.slideUp( 'slow' );
dropdown.stop(false, true).slideToggle('slow');
e.preventDefault();
} );
});
});
When you click the title then the menu items in the other divs will be slid up and hidden and the current sub-menu will have its sub-menu toggled.
Edit:
A more efficient version of this is:
JSFIDDLE
$(document).ready(function() {
$.easing.def = "easeOutBounce";
var current_submenu = null;
$( 'div.menu ul li.submenu' ).each( function(){
var dropdown = $( this ).next();
$( 'a.title', this ).click( function(e){
if ( current_submenu !== null && current_submenu != dropdown )
{
current_submenu.slideUp( 'slow' );
}
current_submenu = dropdown;
dropdown.stop(false, true).slideToggle('slow');
e.preventDefault();
} );
});
});
Edit 2:
JSFIDDLE
dynamic_value_from_controller = 1;
$(document).ready(function() {
$.easing.def = "easeOutBounce";
var menus = $( 'div.menu ul li.submenu' ),
current_submenu = null;
menus.next().hide();
menus.each( function(i){
var dropdown = $( this ).next(),
title = $( 'a.title', this );
title.click( function(e){
if ( current_submenu !== null && current_submenu != dropdown )
{
current_submenu.slideUp( 'slow' );
}
current_submenu = dropdown;
dropdown.stop(false, true).slideToggle('slow');
e.preventDefault();
} );
if ( i == dynamic_value_from_controller )
title.click();
});
});
Edit 3
Added a dynamic_value_from_controller variable into the previous edit to control which menu is initially opened.
JSFIDDLE

Get array of IDs after jQuery UI Sortable

I am using jQuery UI draggable and sortable functions and I am new to this.
I have list of items in left (generated from database ) and I have boxes on right where user can drag and drop them.
While/after dropping user can sort them.
Here is full preview : http://jsbin.com/oBeXiko/3
Problem: How can I get array of IDs of elements in each box after sorting?
I have tried .sortable("toArray") and sortable("serialize") but both return empty string.
Simple HTML
<div id="raspored">
<div class="left">
<ul id="kanta">Delete</ul>
<ul id="lista_predmeta" class="droptrue">
<li class="predmet ui-state-default" predmet-id="id_1">Item_1</li>
<li class="predmet ui-state-default" predmet-id="id_2">Item_2</li>
<li class="predmet ui-state-default" predmet-id="id_3">Item_3</li>
<li class="predmet ui-state-default" predmet-id="id_4">Item_4</li>
</ul>
</div>
<div class="right">
<ul class="raspored" razred="1">I</ul>
<ul class="raspored" razred="2">II</ul>
<ul class="raspored" razred="3">III</ul>
<ul class="raspored" razred="4">IV</ul>
</div>
</div>
My jQuery functions
$(document).ready(function() {
var url = "";
var raz = 0;
$( ".raspored" ).sortable({
cursor: 'move',
opacity: 0.65,
stop: function ( event, ui){
var data = $(this).sortable('toArray');
console.log(data); // This should print array of IDs, but returns empty string/array
}
});
$(".raspored").droppable({
accept: ".predmet",
drop: function(event, ui){
ui.draggable.removeClass("predmet");
ui.draggable.addClass("cas");
raz = $(this).attr("razred");
}
});
$(".predmet").draggable({
connectToSortable:".raspored",
helper: "clone",
revert: "invalid",
stop: function(event, ui){
var predmet = $(this).attr("predmet-id") ;
console.log( "PredmetID = " + predmet + " | RazredID = " + raz);
}
});
$("#kanta").droppable({
accept: ".cas",
drop: function(event, ui){
ui.draggable.remove();
}
});
$( ".raspored, .predmet, .cas, #kanta, #lista_predmeta" ).disableSelection();
});

When you call toArray, you can pass an options object with an attribute field. This attribute field defines what attribute is used in the toArray call. For example:
var data = $(this).sortable('toArray', { attribute: 'predmet-id' });
That will give you an array of the predmet-id attributes of the items. See the toArray documentation.
Note that the default attribute is id, which is why your array returned empty strings before - none of your elements have id attributes!

use serialize that work for me. below are sample code that may help you.
<ul id="sortable">
<li id="ID_11" class="ui-state-default">sai</li>
<li id="ID_21" class="ui-state-default">2</li>
<li id="ID_3" class="ui-state-default">3</li>
<li id="ID_4" class="ui-state-default">4</li>
<li id="ID_5" class="ui-state-default">5</li>
<li id="ID_6" class="ui-state-default">6</li>
<li id="ID_7" class="ui-state-default">7</li>
<li id="ID_8" class="ui-state-default">8</li>
<li id="ID_9" class="ui-state-default">9</li>
<li id="ID_10" class="ui-state-default">10</li>
<li id="ID_11" class="ui-state-default">11</li>
<li id="ID_12" class="ui-state-default">12</li>
</ul>
Save
<span id="categorysavemessage"></span>
Javascript code are :
<script>
$(function() {
$( "#sortable" ).sortable();
});
function saveDisplayChanges()
{
var order = $("ul#sortable").sortable("serialize");
var a = "hello";
var b = "hi";
$.post("update_displayorder.php?"+order+"&a=hello"+"&b=developer",{abc:a,xyz:b},function(theResponse){
$("#categorysavemessage").html(theResponse);
});
}
</script>
Php script for fetch order data with other info
update_displayorder.php script are :
<?php
echo "<pre>";
print_r($_REQUEST);
$newOrder = $_POST['ID'];
$counter = 1;
foreach ($newOrder as $recordIDValue) {
echo $counter .' '. $recordIDValue .'<br/>';
$counter ++;
}
?>

jQuery - Non-nested / non-descendant sibling navigation shown on hover event

I have 2 navigation areas. The second should appear when an element in the first is hovered over and it should disappear if the mouse does not move over it.
Very basically i have:
HTML
<ul class="main">
<li class="1">item 1</li>
<li class="2">item 2</li>
</ul>
<div class="sub">
<ul class="1">
<li>1 sub item 1</li>
<li>1 sub item 2</li>
</ul>
<ul class="2">
<li>2 sub item 1</li>
<li>2 sub item 2</li>
</ul>
</div>
I want ul.1 to appear when I hover over li.1 and ul.2 to appear when I hover over li.2, and I want them both to disappear only when I am not hovering over the sub uls.
I've got it working part way:
JAVASCRIPT
var sections = new Array('1', '2');
$.each(sections, function(i, section) {
$('ul.main li.' + section).hover(
function() {
$('div.sub ul').hide();
$('div.sub ul.' + section).show();
}
);
});
This will show the correct section and hide the others, but I can't figure out how what I need so that, when the mouse moves off a ul.main li, the .sub ul disappears if it's not being hovered over.
Update: Fiddle here: http://jsfiddle.net/alluvialplains/XY4mH/

You're part of the way there #EpF. The problem is that your semantic example given above (which is possible to adhere to) is trying to capture a mouseleave event and while it's possible to use jQuery's .not() function to achieve this, it would be expensive. Really, the smartest way to do this is to have an outer wrapper for your whole navigation (wrapping all div's you've got in your existing fiddle) and then bind your show() event to mouseenter, while separately binding your .hide() event (the one for ALL .subz) to an event triggered on mouseleave for the wrapper div.
Given the following HTML:
<div id="nav-wrap">
<ul class="mainz">
<li class="1">item 1</li>
<li class="2">item 2</li>
</ul>
<div class="subz">
<ul class="1">
<li>1 sub item 1</li>
<li>1 sub item 2</li>
</ul>
<ul class="2">
<li>2 sub item 1</li>
<li>2 sub item 2</li>
</ul>
</div>
</div><!-- /END #nav-wrap -->
You can achieve the effect with the following javascript
$( document ).ready( function () {
var $ul = $( '.subz ul' ).hide();
$( '.mainz li' ).on( 'mouseenter', function(event){
$ul.hide().eq( $( this ).index() ).show();
});
$( '#nav-wrap' ).on( 'mouseleave', function(event){
$ul.hide();
});
});
Here is a JSFiddle of it in action: http://jsfiddle.net/XY4mH/4/
Also, I should note that the .hover() function is deprecated in jQuery for quite a while now and could disappear sometime soon. Note that I used the .on() function, which is the correct way to bind these kinds of events in jQuery.

$( document ).ready( function () {
$( '.main li' ).on( 'click', function () {
$( '.sub ul' )
.hide()
.eq( $( this ).index() )
.show();
});
});
That should do the trick. But as #Mottie said, nesting menus would work better / more symantecly
Edit: Sorry this is working on click. Just a sec and I'll have it updated
$( document ).ready( function () {
var $ul = $( '.sub ul' ).hide();
$( '.main li' ).hover(
function () {
$ul
.hide()
.eq( $( this ).index() )
.show();
},
function () {
$ul.hide()
}
);
});