Develop Reference

jQuery DOM - Inserting multiple nodes in li (menu)

I know there are dozens of similar topics but I am so dumb I can't learn anything from it.
Other words: My code is just mean and doesn't work with any fixes published online. ;)
My HTML:
<ul id="main_menu">
<li class="menu-item">Link 1</li>
<li class="menu-item">Link 2</li>
<li class="menu-item">Link 3</li>
<li class="menu-item">Link 4</li>
</ul>
and how the LI should look after JS does its magic:
...
<span data-title="Link 1">Link 1</span>
...
JS/JQ mission:
add class="roll-link" to every A
add SPAN right after A tag
add data-title="xxx" attribute to SPAN with A value (text exactly the same as the A)
close SPAN tag before A closing tag
My JS try:
var menuLis = document.querySelectorAll("ul.main_menu li"); //It's an Array right?
for(var i=0; i<menuLis.length; i++) {
this.nextChild.setAttribute('class', 'rollink');
var span = document.createElement('span');
this.nextChild.nextSibling.insertBefore(span); //Auto-closing </span> may be an issue...
span.setAttribute('data-title', hrefvalue[i]); //but how to get value?
}
It may be total crap but I have completely no experience in JS/JQ, only had few hours of basic training online...
Thanks for reading and even bigger thanks for trying to help.
Greets!

it should be as simple using jQuery(because you tagged it with jQuery)
jQuery(function ($) {
$('#main_menu li a').addClass('roll-link').wrapInner(function () {
return $('<span />', {
'data-title': $.trim($(this).html())
});
})
})
Demo: Fiddle
See
selectors
addClass()
wrapInner()
dom ready
To make your code work, first the main_menu is an id, not a class so you need to use id selector, then try
var as = document.querySelectorAll("#main_menu li a");
for (var i = 0; i < as.length; i++) {
as[i].className = 'rollink';
var span = document.createElement('span');
span.setAttribute('data-title', as[i].innerHTML);
span.appendChild(as[i].firstChild);
as[i].appendChild(span)
}
Demo: Fiddle

$('#main_menu > li > a').each(function () {
var text = $(this).addClass('roll-link').contents().first();
text.wrap($('<span>').attr('data-title', text.text()));
});
DEMO: http://jsfiddle.net/Bw723/

Here is your solution with pure Javascript.
//get the li elements
var menuLis = document.getElementById("main_menu").getElementsByTagName('li');
for(var i=0; i<menuLis.length; i++) {
menuLis[i].firstChild.setAttribute('class', 'rollink');
var span = document.createElement('span');
span.setAttribute('data-title', menuLis[i].innerHTML);
//If you want to get href of a then use this one.
//span.setAttribute('data-title', menuLis[i].href);
//appending the span into a
menuLis[i].firstChild.appendChild(span);
}
DEMO

Issue with adding UL markup for LI

This sounds simple, and it should be, but it doesn't seem to be so cut and dry...
I have a list of li elements..
<li>Text here</li>
<li>Text here</li>
<li>Text here</li>
What I want to do is find the 1st one, add <ul> before it. Find the last one, add </ul>
It sounds simple but stay with me...
First I tried this:
$('li').each(function(i,obj) {
var x = $(this);
if(x.prev().prop('tagName')!=='LI') x.before('<ul>')
if(x.next().prop('tagName')!=='LI') x.after('</ul>')
});
Which evolved into this:
$('li').each(function(i,obj) {
var x = $(this);
$.fn.outerHTML = function(){
var x = $(this);
x.wrap('<p/>')
var html = x.parent().html();
x.unwrap();
return(html);
}
alert(x.outerHTML());
if(x.prev().prop('tagName')!=='LI') x.html('<ul>'+x.outerHTML())
if(x.next().prop('tagName')!=='LI') x.html(x.outerHTML()+'</ul>')
});
The 1st code places an empty UL before the 1st LI (closing tag and all)
The 2nd wraps only the 1st LI.
It goes down the list 1, 2, 3 and seems to report back properly... something (possibly jQuery) seems to be altering my code somewhere along the way. Can anyone shed some insight here?
Fiddle to fiddle with: http://jsfiddle.net/yr67N/
Update:
As you can see from the code, the lis must be grouped together. wrapAll won't work here.

Just tried this on your fiddle and it appears to work:
var collectedLi = [];
$('li').each(function(){
collectedLi.push(this);
if(!$(this).next().is('li')){
$(collectedLi).wrapAll('<ul/>');
collectedLi = []
}
});
For every li it will check if the next element is also an li, if not it will wrap the current collection in a ul and then empty the collection to continue the loop.
Just realized that the above code will also wrap already wrapped li tags, here is a solution that will handle this:
var collectedLi = [];
$('li').each(function(){
collectedLi.push(this);
if(!$(this).next().is('li')){
if(!$(this).parent().is('ul')){
$(collectedLi).wrapAll('<ul/>');
}
collectedLi = []
}
});

How about:
$('li').wrapAll('<ul/>');
Fiddle

var ul,
tname;
$('li').each(function(i, el){
tname = $(el).prev().prop('tagName');
if(String(tname) !== 'UL'){
ul = $('<ul></ul>');
$(el).before(ul[0]);
}
$(this).appendTo(ul);
});
fiddle

How to count width of same type elements till some element

HTML:
<li class="home"><img alt="home" src="img/gohome.png"/></li>
<li class="portfolio closed" ><span>portfolio</span></li>
<li class="articles opened" style="margin-right: 849px;"><span>articles</span></li>
<li class="contact"><span>contact</span></li>
JS:
$('nav li').each(function(index) { //Navigation total width
navWidth += $(this).width();
});
I have script like that which works, but I also have to count width of Li elements till some specific element basing on class for ex. portfolio. And i don't have idea how to do it.

Another option with nextUntil():
$("nav li:first").nextUntil(".portfolio").andSelf().each(function(index) {
navWidth += $(this).width();
});

One way could be to exit the loop when you encounter an element with that class:
$('nav li').each(function() {
if ($(this).hasClass('portfolio')) {
return false;
}
navWidth += $(this).width();
});
Another way is to just select all the elements until the element with class portfolio. This can be done by getting the index of said element and select all elements up to that index:
var $lis = $('nav li');
$lis.slice(0, $lis.filter('.portfolio').index()).each(function() {
// ...
});
This is under the assumption that all those li elements are siblings of each other.
Reference: .each, .filter, .slice

count direct children in html list

Here's how the HTML markup looks like
<ul>
<li>red</li>
<li>green</li>
<li>
<ul>
<li>banana</li>
<li>pineapple</li>
<li>peanut</li>
</ul>
</li>
<li>blue</li>
<li>
<ul>
<li>sun</li>
<li>mars</li>
<li>earth</li>
</ul>
</li>
<li>orange</li>
</ul>
how do I count direct children (<li>) in this list? (items containing red,green,blue,orange) ?

Try this:
$('ul > li').length;
'ul > li' selector point only first level of children i.e direct children for all ul.
or
$('ul').children().length;
If your code is string variable like
var html = '<ul><li>.....';
Then
$('ul > li', $(html)).length;
NOTE: Above code will find all li
To find only first level of li use:
$('ul:not(li > ul)').children().length;
You can also use:
$('ul:not(li > ul) > li').length
For html variable string:
$(html).children('ul > li').length;

var ul = document.querySelector('ul');
var count = 0;
for (var ch = ul.firstChild; ch; ch = ch.nextSibling)
if (ch instanceof HTMLLIElement) count++;

Use this:
$("ul > li").length
Other way:
$("ul").children().length
In JQuery documentation you can also find size() method to get the number of elements. However, it is better to use length, since it is simply faster.
The first ul element can be taken by :first selector. Another way is to set the concrete <ul> element ID, and address it with #element_id selector.
DEMO: http://jsfiddle.net/xDYn9/

jQuery Find and List all LI elements within a UL within a specific DIV

I have 3 Columns of ULs each a Dynamic UL container that can have anywhere from 0-9 LI containers (eventually more). All my LI elements have an attribute "rel" which I am trying to ultimately find that attribute and use it for something else on all LI elements within that parent DIV. I do eventually want to find more based on each but for not the very least the rel.. Any Ideas how I can achieve that with jQuery? Example:
<ul id="column1">
<li rel="1">Info</li>
<li rel="2">Info</li>
<li rel="3">Info</li>
</ul>
<ul id="column2">
<li rel="4">Info</li>
<li rel="5">Info</li>
<li rel="6">Info</li>
</ul>
<ul id="column3">
<li rel="7">Info</li>
<li rel="8">Info</li>
<li rel="9">Info</li>
</ul>
these elements are all sortable as well. So when I get a list of them I want to also keep them in the order they were found from top to bottom of each column.
I have tried find(), parent(), and similar, maybe I am approaching it wrong. But its still worth mentioning to help come up with an idea

Are you thinking about something like this?
$('ul li').each(function(i)
{
$(this).attr('rel'); // This is your rel value
});

var column1RelArray = [];
$('#column1 li').each(function(){
column1RelArray.push($(this).attr('rel'));
});
or fp style
var column1RelArray = $('#column1 li').map(function(){
return $(this).attr('rel');
});

html
<ul class="answerList" id="oneAnswer">
<li class="answer" value="false">info1</li>
<li class="answer" value="false">info2</li>
<li class="answer" value="false">info3</li>
</ul>
Get index,text,value
js
$('#oneAnswer li').each(function (i) {
var index = $(this).index();
var text = $(this).text();
var value = $(this).attr('value');
alert('Index is: ' + index + ' and text is ' + text + ' and Value ' + value);
});

$('li[rel=7]').siblings().andSelf();
// or:
$('li[rel=7]').parent().children();
Now that you added that comment explaining that you want to "form an array of rels per column", you should do this:
var rels = [];
$('ul').each(function() {
var localRels = [];
$(this).find('li').each(function(){
localRels.push( $(this).attr('rel') );
});
rels.push(localRels);
});