We Keep Coding

jquery random element id for every loop

sorry i'm new in jquery and i need help :-(
i want to traverse all elements on html page with class parts
then go inside to two children and pass them a random number ( the same for them both)
for every element new random number is passed ( no repeat on page)
children classes are :
anot-head
anot-body
this is a sample code:
$(document).ready(function() {
$.each($('.parts'), function(){
var ran=Math.floor(Math.random()* 1000000);
$( ".anot-head" ).attr( "data-toggle","collapse" ).attr( "href","#s"+ran );
$( ".anot-body" ).attr( "id","s"+ran );
});
});

$(".anot-body") does a search of the whole document, if you want to find a particular element in another element you need to do a search from that parent element.
In your case you would do a search on the particular .parts element that is currently being iterated over in your $.each() callback
$('.parts').each(function(index,element){
var parent = $(element);
var ran=Math.floor(Math.random()* 1000000);
parent.find('.anot-head').attr( "data-toggle","collapse" ).attr( "href","#s"+ran );
parent.find('.anot-body').attr( "id","s"+ran );
});

No need to use random.... use index of each
$('.parts').each(function(index){
var $part = $(this);
$part.find('.anot-head').attr({"data-toggle":"collapse","href":"#s"+index});
$part.find('.anot-body').attr("id","s"+ index);
});

jQuery make a series of div tags into an unordered list

I have a series of div tags as follows:
<div>
<div class="MB_SLOT" id="slot1"></div>
<div class="MB_SLOT" id="slot2"></div>
<div class="MB_SLOT" id="slot3"></div>
<div class="MB_SLOT" id="slot4"></div>
</div>
I want to put the MB_SLOT elements into an unordered list (ul) but everything (including the containing div) has been generated by an API that I have no control over and the number of generated elements can vary from page to page.
If I use j$( ".MB_SLOT" ).wrap( "<li></li>" ); I can wrap each of the MB_SLOT elements but I don't know how to then wrap that in <ul></ul>
Can anyone advise on the best method to achieve this?

Give your li's a class for more specificity
$( ".MB_SLOT" ).wrap( "<li class='list-item'></li>" );
Then use .wrapAll() to wrap all instances of "list-item"
$( ".list-item" ).wrapAll( "<ul></ul>" );
Working fiddle

Is the parent always the same, a <div> element?
If so, you could use:
var parent = $( ".MB_SLOT:first").parents("div"), // find parent <div>
ul = $("<ul></ul>"); // setup <ul> element
parent.prepend( ul ); // add <ul> element as first child in parent
$( ".MB_SLOT" ).appendTo( ul ); // move .MB_SLOT as children of <ul>
$( ".MB_SLOT" ).wrap( "<li></li>" ); // wrap .MB_SLOT in <li>
https://jsfiddle.net/opzLLx9h/

you could do something like this (rebuild the divs into lis) https://jsfiddle.net/rwghggx4/2/
i could be mistaken, but the reason why this example "builds" an li instead of just wrapping the div in an li is because you're not supposed to put divs in lis.
$(document).ready(function() {
function transformToUL() {
var html = "<ul>";
$('.MB_SLOT').each(function() {
console.log($(this));
html += "<li class='MB_SLOT' id='" + $(this).attr('id') + "'>" + $(this).text() + "</li>";
});
$('.container').append(html);
$('.changeToUL').hide();
}
transformToUL();
});

JQuery: create array from element's name and create list

I would like to getElement's names => make an array => create a menu as list => add some clickbehaviour CSS. When exercising I already found a way to get all elements but could not reach their names.
The elements I am aiming for look like this <a class="jqsubmenu" name="ELEMENTSNAME"></a>.
The HTML-Code to be produced needs to be like <div id="#submenu"><ul>...</ul></div>. The <li> needs to look like <li>ELEMENTSNAME</li>. When a menu item is clicked any "active" classes in #submenu need to be removed and the clicked Anchor gets class="active".
Here are my results where I got stuck:
1) Get elements:
var optionTexts = [];
$("A.jqsubmenu").each(function() { optionTexts.push($(this).text()) });
2) make list (once I hopefully have an array) and write into DOM
var SubmenuArray = ['One', 'Two', 'Three'];
// GENERATE SUBMENU
var ObjUl = $('<div id="submenu"><ul></ul></div>');
for (i = 0; i < SubmenuArray.length; i++)
{
var Objli = $('<li></li>');
var Obja = $('ARRAYITEM');
} // WRITE INTO DOM
$('#submenuwrap').append(ObjUl);
}
3) CSS-Gimmick
$( document ).ready(function() {
$( "#submenu A" ).click(function( event ) {
$( "#submenu A" ).removeClass("active");
$( this ).addClass("active");
});
});
Thanks for your answers and all the best!

To access element's name attribute use
$("A.jqsubmenu").each(function() { optionTexts.push($(this).attr("name")) });

How to use JQuery Contains with id selector

I want to use the jQuery contains selector only for a table with a unique id.
I tried it like this but doesnt work.
var x = "tree";
$( "#TableID.tr:contains('" + x + "')").css( "background-color", "red" );
The code should change the backgroundcolor of every row which contains x in the tr tag in a table with the id TableID.
Can anyone help me with the correct syntax?

you should use descendant selector for the table and the tr element
$( "#TableID tr:contains('" + x + "')").css( "background-color", "red" );
Your code looks for a table with id TableID with class tr and contains the given text some where within it

You need to separte the .tr form the table id and remove the dot as it is not a class element.
$( "#TableID tr:contains('" + x + "')").css( "background-color", "red" );
Living demo

Try this,
$( "tr:contains('" + x + "')").css( "background-color", "red" );
Demo link http://jsfiddle.net/dhana36/YT3CD/2/

locate and use src values contained within <li><img src=""></li> with PHP

Im trying to get the string value of an img tag that is contained within a li tag that I have in my code using javascript.
The goal is to get all of the text contained in the img tag. But clearly I don't understand how to go that deep. When I try, I
The format of the html that Im trying to extract is...
<ol>
<li><img ....../></li>
</ol>
Using what appears below, I get [object] returned instead of a string. Any idea on how to get the actual value of the string?
<script>
$(function() {
$( "#selectable" ).selectable({
stop: function() {
var result = $( "#select-result" ).empty();
$( ".ui-selected", this ).each(function() {
var index = $( "#selectable li img" );
result.append( " #" + ( index + 1 ) );
});
}
});
});
</script>

For the image source, try
var src = index.attr('src');
You can get any other attributes in the same way.