We Keep Coding

Add span to each element of list

I have a list like this
<ul class="example">
<li>Something</li>
<li>Something</li>
</ul>
The result should be like this
<ul class="example">
<li><span></span>Something</li>
<li><span></span>Something</li>
</ul>
Please help me.

Append a span at the beginning using prepend() method.
$('ul.example li a').prepend('<span></span>')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="example">
<li>Something</li>
<li>Something</li>
</ul>

You can use each() to loop each a element and change its html. DEMO
$('.example li a').each(function() {
$(this).html('<span></span>' + $(this).text())
})

You can simply do this.
$(".example li a").each(function() {
$(this).html(function(i, origText){
return "<span></span>" + origText;
});
});
Here origText contains existing inner elements. Here is the reference JQuery Tutorial
This method is very useful even when you have lot of content inside a div.
Hope that helps :)

Appending an element with an ID that matches a class

I found a couple of other questions that were similar but I'm still not getting the needed result.
So I have a list:
<ul>
<li class="class1"></li>
<li class="class2"></li>
<li class="class3"></li>
<li class="class4"></li>
<li class="class5"></li>
</ul>
And then I have a set of dynamically-generated spans with IDs that match those classes.
<span id="class1"></span>
<span id="class2"></span>
<span id="class3"></span>
<span id="class4"></span>
<span id="class5"></span>
I need to append each of those spans to their matched list item. So .class1 to #class1. I figured there would be something easy like:
$(this).find('#' + this.className).appendTo(this);
Any suggestions?

$("li[class^='class']").on("click", function(){
$("#"+ this.className).appendTo(this);
});
jsBin demo
NOTE: your code will break as soon you add another class to your element:
<li class="class2 something"></li>
cause than you'll be erroneously searching for an ID element called #class2 something.
You'd better go using data-* attributes instead of class names.
$("[data-get]").on("click", function(){
$("#class"+ this.dataset.get).appendTo(this);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li data-get="1" class="class">1</li>
<li data-get="2" class="class">2</li>
<li data-get="3" class="class">3</li>
<li data-get="4" class="class">4</li>
<li data-get="5" class="class">5</li>
</ul>
<span id="class1">s1</span>
<span id="class2">s2</span>
<span id="class3">s3</span>
<span id="class4">s4</span>
<span id="class5">s5</span>

My solution, if I understood correctly:
$(function() {
$("span[id^='class']").each(function() {
var liObj = $("li[class='" + this.id + "']");
if (liObj.length == 1) {
$(this).appendTo(liObj);
}
});
}

Sorry for not posting all of my code. It didn't seem necessary. The answer is:
$( '#' + this.className ).appendTo('.' + this.className);
I knew it was something stupidly simple. Thanks for everyone who responded!

Displaying selection text in span

So let's say I have this code:
<span id="select_list">
<ul>
<li><a id="1">1</a></li>
<li><a id="2">2</a></li>
<li><a id="3">3</a></li>
</ul>
</span>
<span id="selection"></span>
And let's also assume that there are a lot of list elements, ex. '4,5,6,7... etc'.
Can I get a html file, that is basically just text, that corresponds to the list element's ID (ex. 1.html, 2.html,... etc), to show in 'selection'?
If so how?
Thanks for your time. Hope I explained it well.

Something like this (jQuery) should work:
var list = $("#select_list");
var sel = $("#selection");
$("a", list).on("click", function(){
var id = $(this).attr("id");
sel.load(id+".html");
});

<div id="select_list">
<ul>
<li id="1">1</li>
<li id="2">2</li>
<li id="3">3</li>
</ul>
</div>
<div id="selection"></div>
i would use a div not span spans are for if you want to change the size of something particular like this:
<li id="1" href="#"><a href="#"><span style="color: red;
font-size: 30px">1</span></a></li>
and from what i am understanding you want a selector to select them in css?
if so this is how:
#select_list ul li:nth_child(1) {
}
or
#select_list ul li#2 {
}
hope this helps you

I would suggest using data-attributes instead of IDs.
HTML
<ul class='selection-list'>
<li data-name='Dog'>Dog</li>
<li data-name='cat.html'>Cat</li>
<li data-name='45'>Fourty Five</li>
<li data-name='Triangle'>Three sides</li>
</ul>
<div class="output js-output"></div>
jQuery
var $output = $('.js-output');
$('.selection-list li').on('click', function() {
var selectionValue = $(this).data('name');
$output.text(selectionValue);
});
CSS
.selection-list li {
cursor: pointer;
}
jsFiddle
iframe
I'm starting to think that you are asking for an iframe with dynamic source. The question is unclear. You may want to try and rewrite it. - Here is what I think you may be after...
HTML
<ul class='selection-list'>
<li data-url='http://reputable.agency'>Reputable Agency</li>
<li data-url='http://perpetual.education'>Perpetual Education</li>
<li data-url='http://example.com/index.html'>Example.com</li>
</ul>
<iframe src='http://example.com' class="output js-output"></iframe>
JavaScript / jQuery
var $output = $('.js-output');
$('.selection-list li').on('click', function() {
// get the 'data-url' from the element...
var selectionValue = $(this).data('url');
// put that data-url into the src attribute of the iFrame
$output.attr('src', selectionValue);
});
Also..
Note that if you are using the same domain for all of these, you can build those urls differently to keep things simple.
<li data-url='index.html'>Example.com</li>
$output.attr('src', 'http://yoursite.com/' + selectionValue);
jsFiddle
AJAX
Now I'm wondering if you mean AJAX. Here is an example - but it's not tested because I don't have access to a bunch of relative URLs - but here is the basics - and should lead you to the right documentation.
HTML
<ul class='selection-list'>
<li data-url='index.html'>Reputable Agency</li>
<li data-url='index.html'>Perpetual Education</li>
<li data-url='index.html'>Example.com</li>
</ul>
<div class="output js-output"></div>
JavaScript / jQuery
var $output = $('.js-output');
var getOtherPage = function(target) {
$.ajax({
url: target,
success:function(response){
$output.html(response);
},error:function(){
alert("error");
}
});
};
$('.selection-list li').on('click', function() {
var selectionValue = $(this).data('url');
getOtherPage(selectionValue);
});

How to get specific element javascript based on style

I need to acces an element that has a certain style.
This is my structure
<ul>
<li> Hi </li>
<li> bye </li>
<li> third one </li>
</ul>
The list items are placed on top of each other (last one first) and I can dislike something or like something. Once I do that, it gets a style display:none like following:
<ul>
<li> Hi </li>
<li> bye </li>
<li style:"display:none;"> third one </li>
</ul>
Now after I did that I want to be able to acces the last element that does not have display:none, (the bye) how can I do this?
I was thinking of something in the form of:
var myId = $("#slider > ul li").last().attr("id");
But obviously I always get the ID of the item that is hidden since its still there.
Can I do something like select last where !display:hidden ?

Can I do something like select last where !display:hidden ?
Yes, with jQuery's :visible pseudo-class:
var myId = $("#slider > ul li:visible").last().attr("id");
(Note: Your li elements don't actually have id values, but that's a tweak.)
Live Example:
var listItem = $("#slider > ul li:visible").last();
$("<p>")
.text("Text of last visible item: " + listItem.text())
.appendTo(document.body);
<div id="slider">
<ul>
<li>Hi</li>
<li>bye</li>
<li style="display:none;">third one</li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Can use ':visible' selector
var myId = $("#slider > ul li:visible").last().attr("id");

It should work using:
$("#slider > ul li:visible").last().attr("id");
https://api.jquery.com/visible-selector/

so your inline styling is a bit off it should be
<ul>
<li> Hi </li>
<li> bye </li>
<li style="display:none;"> third one </li>
</ul>
You could do a few different things, best is probably just iterate through and check for where display = none, then go to the previous element:
$('ul').children().each(function(e) {
if($(this)[0].style.display == 'none') {
console.log($(this).prev());
}
})

How to know the exact children number of Ul element?

I am a newbie in web development. Not sure if it is a dumb question.
<nav class="navigation">
<ul class="navigation-items-container">
<li class="navigation-items">Home</li>
<li class="navigation-items">about</li>
<li class="navigation-items">blog</li>
<li class="navigation-items">contacts</li>
</ul>
/nav>
On hover of each li I want to know its in which children Number of ul.
i.e
On hovering "Home" it should give as children Number 0 and on hovering "blog" it should give children number 2.

As you've included the jQuery tag I'll post a jQuery based answer - if you want a non-jQuery answer let me know:
$(".navigation-items-container li").hover(function(e) {
var index = $(this).index();
});
And FYI your markup is wrong, the anchors should be inside the li tags
The version for your current code (though it should be changed):
$(".navigation-items-container a").hover(function(e) {
var index = $(this).index();
});

Due to the fact that your li elements are within a elements, you should use this:
$(".navigation li").hover(function(){
var index = $(".navigation li").index(this);
alert(index);
});
Here is a working example
Of course, it would be better to have your a elements with the li elements like so:
<li class="navigation-items">Home</li>
That way the li elements will be direct children of the ul element, then you could do this:
$(".navigation li").hover(function(){
var index = $(this).index();
alert(index);
});
Here is a better example
Alternatively, and I am not saying this is better, but you could also use data-* attributes to store the value you want:
<li class="navigation-items" data-myindex="0">Home</li>
with this:
$(".navigation li").hover(function(){
var index = $(this).data("myindex");
alert(index);
});
This has the benefit that you could specify different values if required, such as record IDs for example.
Here is an example

Try this.
$('li').on('mouseover', function(){
console.log($('ul li').index($(this)));
})

Try index()
http://api.jquery.com/index/
$(".navigation ul li").hover(function(e) {
alert($(this).index());
});
More possiblities

this help you
Working Demo http://jsfiddle.net/cse_tushar/7SmfR/
$(".navigation ul li").hover(function() {
alert($(this).index('li'));
});
Correct your markup anchor(a) tag should be enclosed within li tags
<nav class="navigation">
<ul class="navigation-items-container">
<li class="navigation-items">
Home
</li>
<li class="navigation-items">
about
</li>
<li class="navigation-items">
blog
</li>
<li class="navigation-items">
contacts
</li>
</nav>