Develop Reference

jquery - css does not work after .after()

In my html code i change the background color of all elements with the id '#mutable', with a click on button 'blue' or 'red'.
With the third button 'load' i .append() a new HTML with the same id.
But the background color does not change for the new elements?
Whats going wrong?
fiddle
html
<div id="mutable" style="width:50px;height:50px;" class="blue">sjdfhksfh</div>
<div id="newHTML">newHTML</div>
js
$(document).ready(function() {
$('#blue').on('click', function() {
$('#mutable').trigger('blue');
});
$('#red').on('click', function() {
$('#mutable').trigger('red');
});
$('#load').live('click', function(event) {
event.preventDefault();
$('#newHTML').after('<div id=\"mutable\" style=\"width:50px;height:50px;\">...</div>');
event.stopPropagation();
});
$('#mutable').bind('red', function(e) {
$('#mutable').addClass('red').removeClass('blue');
});
$('#mutable').bind('blue', function(e) {
$('#mutable').addClass('blue').removeClass('red');
});
});

You are always creating a new div with the id #mutable. Now jQuery in terms of an ID just runs down the DOM and when it finds the first occurance of your ID, it changes it, but nothing else.
For some solutions, you could use a class .mutable instead of an id - but then every created div would be changed on click.
Or you could enumerate your IDs with a number like #mutable1, #mutable2 and so on and change your menu to select the specific div.
Or, to change just the last occurance of your dynamically created divs, use the :last - CSS- Pseudoclass.

1) id should be unique at page. And selectors like #mutable match only first element with such id -- So after pressing 'load' you create new element with the same id, but $ still match old one
2) try next ( I just change your id-selector into attr-selector which allow find all elements with id ):
$('#mutable').bind('blue', function(e) {
//alert('blue');
$('[id=mutable]:last').addClass('blue').removeClass('red');
});
http://jsfiddle.net/q3wzwr6z/

Remove element from jQuery selection

Let's say I have some sibling DOM elements that exist only within a jQuery selection:
var $container = $('<div></div><span></span>');
I want $div to only contain <div></div>, so I try to remove the <span>:
$container.find('span').remove();
// Note that span still exists:
console.log($div.length === 2);
What's the right way to solve this?

Your current selection is your <div> element. You need to find your span within there and call .remove() on that.
The parameter passed to .remove() does not find elements within the current collection, it filters it.
var $div = $('<div><span></span></div>');
$div.find('span').remove();

This doesn't modify the current selection so this isn't ideal, but I ended up finding a solution using .not():
$div = $div.not('span')

get the div parent element of a clicked element, in order to get the p class in the same div

I have a div that looks like this:
<td id="monday">
<p class="outter">whatever here</p>
<p class="hidden" style="display:none">Some content I want to get</p>
</td>
Now the problem is - the td id will change (this is just one of many).
So what I'm trying to do, is when a user clicks on the .outter (it'll always be called outter), I want to find the td id, in order to then get access to the p class (which will always be 'hidden').
So I've tried this (document.body is to get round a dynamic loading problem I had):
$(document.body).on('click', '.outter', function() {
var info = $(this).parent("td").$(".hidden").text();
$("#rightBox").css("width", "200px");
$("#rightBox").css("background", "#f0f0f0");
$("#rightBox").empty();
$("#rightBox").append(info);
});
The issue I am having is in the very first line, getting the variable.
I want to say this particular .outter class, find it's parent, then find the hidden class within it. Then get the text within that hidden class. Then take that variable and dump it into #rightBox;
Can anybody help?

The line var info = $(this).parent("td").$(".hidden").text(); throws an error, you should use find or children method, as the target element is a next direct sibling of the clicked element, you can use next method, you don't need the ID of the parent element.
$(document.body).on('click', '.outter', function() {
// var info = $(this).closest('td').find('.hidden').text();
var info = $(this).next('.hidden').text();
$("#rightBox").css({"width": "200px", "background": "#f0f0f0"})
.html(info);
});
Note that you can also create a class and use addClass method instead of css method, this makes your code a little cleaner.

You can do like this:
$(document.body).on('click', '.outter', function() {
var info = $(this).next().text();
$("#rightBox").css("width", "200px");
$("#rightBox").css("background", "#f0f0f0");
$("#rightBox").empty();
$("#rightBox").append(info);
});
Demo: http://jsfiddle.net/eMzcx/

remove hyperlinks from the selected li

I'm trying to remove all hyperlinks from the selected li with jquery but doesn't seems to work properly. When is clicked all my hyperlinks getting removed. A detaliet view of my code http://jsfiddle.net/78kAu/1/. The event what is firing the code looks as it follows
$('a').click(function(){
var selected = $(this).attr('class');
var row = $('.elements li').length;
alert(selected);
$("a").remove();
});

Instead of
$("a").remove();
you want:
$(this).remove();
What you've got says "find all the <a> elements on the page, and remove each of them."
If you want to remove all the <a> elements from some container above the clicked element, like an <li>, you'd do this:
$(this).closest('li').find('a').remove();

jquery .each() loop

i want to read all links in ".vm-video-title"-divs and post them each in the same div. So i made this script:
$('.vm-video-title').each(function(i) {//all divs
$(this).html($(this).html()+$("div.vm-video-title>a").text());//add to div the link
});
but i have the problem that it reads ALL the links of all divs and put them in one div.
example:
<div class="vm-video-title">Text1</div>
<div class="vm-video-title">Text2</div>
<div class="vm-video-title">Text3</div>
output:
Text1Text1Text2Text3
Text2Text1Text2Text3
Text3Text1Text2Text3
wanted output:
Text1Text1
Text2Text2
Text3Text3

You can select the <a> elements directly, and use the after()[docs] method to append the content of each after each one respectively.
$("div.vm-video-title > a").after(function() { return $(this).text(); });
This doesn't do a "destroy then recreate" of the existing elements like the html()[docs] method will.
Working example: http://jsfiddle.net/CCr9C/

This should do the job for you,
you need to find the div inside current element in the loop (el).
$('.vm-video-title').each(function(i, el) {
el = $(el);
el.html(el.html()+el.find("a").text());
});
in your code you are adding text() of all matching "a" tags in your divs (i.e. Text1Text2Text3)

You were almost there. Instead of : $("div.vm-video-title").text(), which gives you text inside any div with class vm-video-title, you need to find a tag inside current div and get text from it. We pass this as context for selecting a inside current div jQuery( selector, [context] )
$('.vm-video-title').each(function(i) {//all divs
$(this).html($(this).html()+$("a", this).text());
});