We Keep Coding

i want to run this code while loading the page

how can I assign the values automatically when the page load without having to invoke the hover or click any event actions. The colors will be changed based on user inputs or random color that will be generated automatically hover the container "someclass" will be the same for all.
<div class="container1">
<div class="someclass"> " #ffff13 " </div>
</div>
<div class="container2">
<div class="someclass"> " #ffff15 " </div>
</div>
<div class="somecontainer">
<div class="someclass"> " #ffgf19 " </div>
</div>
<div class="thecontainer">
<div class="someclass"> " #0fff1a " </div>
</div>
<div class="container1">
<div class="someclass"> " #cfff17 " </div>
</div>
<div class="mastercontainer10">
<div class="someclass"> " #1fff13 " </div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$(".someclass").hover(
function() {
var color = /#[0-9\A-F]+/.exec($(this).html())[0];
$(this).css('background', color)
}, function() {
$(this).css('background', color)
});
});
</script>

Are you looking for this
(function () {
$(".someclass").each(function () {
var html = $(this).html();
var color = html;
$(this).css('background', color);
});
})();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="someclass">#ffff13</div>
<div class="someclass">#ffff25</div>
<div class="someclass">#ffff36</div>
<div class="someclass">#ffff48</div>
<div class="someclass">#ffff50</div>
<div class="someclass">#87CEEB</div>
Or
you Lookig for this
(function () {
var color;
$(".someclass").hover(function () {
var html = $(this).html();
color = html;
this.style.backgroundColor = color
});
$(".someclass").mouseleave(function () {
this.style.backgroundColor = "white"
});
})();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="background-color:white;" class="someclass">#ffff13</div>
<div style="background-color:white;" class="someclass">#ffff25</div>
<div style="background-color:white;" class="someclass">#ffff36</div>
<div style="background-color:white;" class="someclass">#ffff48</div>
<div style="background-color:white;" class="someclass">#ffff50</div>
<div style="background-color:white;" class="someclass">#87CEEB</div>

Try putting the hover function in an anonymous function
JavaScript
(function() {
// insert code here
})(); // anonymous function

How to add values on existing parameter using Jquery?

I have a jquery code that is almost complete. I want the new values of the existing parameter to be added on the <a href> using jquery but my code only adds the value at the end of the href.
Sample case:
My parameters in the href are food-option AND talent-option.:
<a href="food-option=0&talent-option=0">
Then I have new values to be added for food option.
values: 123,456
My href should be like this:
<a href="food-option=0,123,456&talent-option=0">
This is my code that adds the value:
$(this).closest(".option-container").find("a.food-form-select-food").each(function () {
var _href = $(this).attr("href");
$(this).attr("href", _href + ',' + addnid);
});
But the result is like this:
<a href="food-option=0&talent-option=0,123,456">
Which is wrong.
Here is a JSfiddle/Demo of my work
Can somebody please help me?
Thank you very much in advance!

You are almost there.
Try this:
$(this).closest(".option-container").
find("a.food-form-select-food").each(function () {
var _href = $(this).attr("href").split("&");
_href[0] += ',' + addnid;
$(this).attr("href", _href.join("&"));
});

i think your looking for something like this:
$(this).closest(".option-container").find("a.food-form-select-food").each(function () {
var _href = $(this).attr("href");
var n = str.indexOf(",");
var output = _href.substr(0, position) + addnid + _href.substr(position);
});
and if you want more answers look at this:
Inserting string at position x of another string

try this, JSFIDDLE
$(document).ready(function () {
$(".select-addon").click(function () {
var addtitle = $(this).closest('.optionlist').find('.option-title').html();
var addnid = $(this).closest('.optionlist').find('.option-nid').html();
var html = '<li class="option-list">' + addtitle + '<div class="addnid2">' + addnid + '</div><span class="remove-addons"> Remove</span></li>';
$(this).closest(".option-container").find('#your-addons').append(html);
$(this).closest(".option-container").find("a.food-form-select-food").each(function () {
var _href = $(this).attr("href");
var splited = _href.split('&');
$(this).attr("href", splited[0] + ',' + addnid+'&'+splited[1]);
});
});
$(document).on('click', '.remove-addons', function () {
var addnid2 = $(this).closest('.option-list').find('.addnid2').html();
$(this).closest(".option-container").find("a.food-form-select-food").each(function () {
var href = $(this).attr('href');
$(this).attr('href', href.replace("," + addnid2, ""));
});
$(this).closest('li').remove()
});
});
.option-nid {
display: none;
}
.addnid2 {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="option-container" style="width:200px; float:left">
<div class="optionlist">
<div class="option-title">Food Set A</div>
<span class="select-addon">SELECT </span>
<div class="option-nid">132</div>
</div>
<div class="optionlist">
<div class="option-title">Food Set B</div>
<span class="select-addon">SELECT </span>
<div class="option-nid">133</div>
</div>
<div class="optionlist">
<div class="option-title">Food Set C</div>
<span class="select-addon">SELECT </span>
<div class="option-nid">134</div>
</div>
<br/>
<br/>
<br/>
<ol id="your-addons"></ol>
LINK
</div>
<div class="option-container col-md-6">
<div class="optionlist">
<div class="option-title">Food Set A</div>
<span class="select-addon">SELECT </span>
<div class="option-nid">132</div>
</div>
<div class="optionlist">
<div class="option-title">Food Set B</div>
<span class="select-addon">SELECT </span>
<div class="option-nid">133</div>
</div>
<div class="optionlist">
<div class="option-title">Food Set C</div>
<span class="select-addon">SELECT </span>
<div class="option-nid">134</div>
</div>
<br/>
<br/>
<br/>
<ol id="your-addons"></ol>
LINK
</div>

my JS work on second click

This is my JS. I dont know why the "X" created by append to last child doesn't work on first click, but it does work on the second click. "x" url is in the cloned div. Is that causing the problem? Or is there something wrong in the HTML?
$(document).ready(function () {
$(".add").click(function () {
var aaa = $(this).parent("div").attr('id')
$(this).parent().children(".add").siblings(".name,.detail,.price").clone().appendTo(".CART").wrapAll('<div class="dump ' + aaa + '"></div>')
$(this).removeClass("add").addClass("added");
$(".dump:last-child").append('<a class="delC" href="javascript:delC()">x</a>');
$(".dump").removeClass("dump")
});
})
////////////////
function delC() {
$(document).on('click', '.delC', function () {
var xx = $(this).parent("div").attr('class')
$("." + xx + "").remove()
})
}
<div id="itemA">
<div class="detail">USB</div>
<div class="name">USB type1</div>
<div class="price">1500</div>
<div class="weight">20 Gr</div>
<a class="add">add</a>
</div>
<div id="itemB">
<div class="detail">RAM</div>
<div class="name">RAM type1</div>
<div class="price">2000</div>
<div class="weight">50 Gr</div>
<a class="add">add</a>
</div>
<div class="CART"></div>

The problem is that you are binding click event inside the delC function. So the first time you click you just bind events (and then you bind more and more event handlers)..
Instead remove delC function and just delegate delete events in the first place:
$(document).ready(function () {
$(".add").click(function () {
var aaa = $(this).parent("div").attr('id')
$(this).parent().children(".add").siblings(".name,.detail,.price").clone().appendTo(".CART").wrapAll('<div class="dump ' + aaa + '"></div>')
$(this).removeClass("add").addClass("added");
$(".dump:last-child").append('x');
$(".dump").removeClass("dump");
});
})
$(document).on('click', '.delC', function () {
var xx = $(this).parent("div").attr('class')
$("." + xx + "").remove()
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="itemA">
<div class="detail">USB</div>
<div class="name">USB type1</div>
<div class="price">1500</div>
<div class="weight">20 Gr</div> <a class="add">add</a>
</div>
<div id="itemB">
<div class="detail">RAM</div>
<div class="name">RAM type1</div>
<div class="price">2000</div>
<div class="weight">50 Gr</div> <a class="add">add</a>
</div>
<div class="CART"></div>

You dont need a separate function to be called on href. You can just bind that to a click function.
$(document).on('click', '.delC', function(e){
e.preventDefault();
var xx = $(this).parent("div").attr('class')
$("."+xx+"").remove()
})
Working JsFiddle http://jsfiddle.net/j65uex6t/

This should do the trick
Fiddle
$(function () {
$(".add").click(function () {
var aaa = $(this).parent("div").attr('id')
$(this).parent().children(".add").siblings(".name,.detail,.price").clone().appendTo(".CART").wrapAll('<div class="dump ' + aaa + '"></div>')
$(this).removeClass("add").addClass("added");
$(".dump:last-child").append('<a class="delC">x</a>');
$(".dump").removeClass("dump")
});
$(document).on('click', '.delC', function (e) {
e.preventDefault();
var xx = $(this).parent("div").attr('class')
$("." + xx + "").remove()
})
});

How can I change each div id which is the last part of a number

I want to change each div id with change function.
before:
<div id="a_1">a1</div>
<div id="b_1">b1</div>
<div id="c_1">c1</div>
<div id="d_1">d1</div>
<button onclick="change()">Değiştir</button>
after:
<div id="a_2">a2</div>
<div id="b_2">b2</div>
<div id="c_2">c2</div>
<div id="d_2">d2</div>
<button onclick="change()">Değiştir</button>
I've tried this function but it didnt work
function change()
{
var old_id=1;
var new_id=2;
alert( bas( $("#a_1").attr("id")) );
$("div[id$=_"+old_id+"]").attr("id", bas( $("div[id$=_"+old_id+"]").attr("id") ) +new_id);
}
How can I do?
Thanks.

After doing some small changes you can achieve these this easily.
Try this:
HTML Code:
<div id="a_1">a1</div>
<div id="b_1">b1</div>
<div id="c_1">c1</div>
<div id="d_1">d1</div>
<button onclick="change(1, 2)">Değiştir</button>
Javascript/Jquery Code:
function change(oldid, newid)
{
$('div[id $= "_' +oldid+ '"]').each(function(){
var clone =$(this).clone(true).attr('id' , 'id_' + newid);
$('body').append(clone);
});
var nextid = newid + 1;
$('body').append('<button onclick="change(' + newid + ',' + nextid +')">Değiştir</button>');
}
Working Example

I have added class attribute to the div elements. Here is the demo JSFIDDLE
HTML:
<div id="a_1" class="my_div">a1</div>
<div id="b_1" class="my_div">b1</div>
<div id="c_1" class="my_div">c1</div>
<div id="d_1" class="my_div">d1</div>
<button onclick="change_ids()">Değiştir</button>
JS:
change_ids=function()
{
var old_id=1;
var new_id=2;
$('div.my_div').each(function() {
var div_id = $(this).attr('id');
var arr = div_id.split("_");
//alert(arr[0]+" "+arr[1]);
var new_div_id = arr[0]+"_"+new_id;
$(this).attr('id', new_div_id);
$(this).html(new_div_id);
});
alert('Div ids changed')
}

Jquery - Get div number from a list by hovering

How can a get the number by hovering mouse over the div?
HTML
<div id="log"></div>
<div id="myList">
<div class="divHV">One </div>
<div class="divHV">Two</div>
<div class="divHV">3 </div>
<div class="divHV">Blub </div>
<div class="divHV">Peter</div>
<div class="divHV">6 House</div>
<div class="divHV">last one is 7</div>
</div>
JS
$(document).ready(function() {
$('.divHV').hover(function()
{
XX = '';
$('#log').html('This is the div number '+XX+' <br />');
}, function ()
{
$('#log').html('');
});
});
Working exmaple
http://jsfiddle.net/9R4aC/2/

XX = $(this).index();
but that will start from 0 you can add +1 if you want..
http://jsfiddle.net/9R4aC/2/

$(document).ready(function() {
$('.divHV').each(function(i) {
$(this).hover(function() {
XX = i;
$('#log').html('This is the div number ' + XX + ' <br />');
}, function() {
$('#log').html('');
});
});
});
http://jsfiddle.net/9R4aC/3/