Develop Reference

How do I replace only PART of an image source on hover using jquery?

<li class="active"><img src="images/static/personal_information.png" class="img-responsive center-block"><span>Personal<br> Information</span> </li>
This is what i trying
$(".navbar-nav li a").hover(function(){
$(this).children("img").attr('src').replace('hover','static');
});

Firstly your arguments to replace() are the wrong way around. Secondly, you need to actually set the value after making the replacement. Lastly you'll also need to provide another function argument to hover() that sets the original image back on mouseout. Try this:
$(".navbar-nav li a").hover(function() {
$(this).children("img").prop('src', function(i, src) {
return src.replace('static', 'hover');
})
}, function() {
$(this).children("img").prop('src', function(i, src) {
return src.replace('hover', 'static');
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="navbar-nav">
<li class="active">
<a href="#">
<img src="images/static/personal_information.png" class="img-responsive center-block">
<span>Personal<br> Information</span>
</a>
</li>
</ul>

You are replacing src code, but not assigning it back.
$(".navbar-nav li a").hover(function(){
var newSrc = $(this).children("img").attr('src').replace('hover','static');
$(this).children('img').attr('src', newSrc)
});

Why are you targeting <a>, then select its child <img>? Why not apply that to the image directly?
$(".navbar-nav li a img").hover(function(){
$(this).attr('src') = $(this).attr('src').replace('hover','static');
});

how to set image dynamically to li tag using jquery

i have jquery slider. this slider has images and thumb nails of those images. i would like to replace images and thumbnails respectively which comes from jquery ajax call.
this is my slider code:
<ul id="thumbs" class="slides">
<li id="firstthumb" data-thumb="images/s/img8.jpg">
<img id="firstimage" src="images/s/img8.jpg" />
</li>
<li id="secondthumb" data-thumb="images/s/img10.jpg">
<img id="secondimage" src="images/s/img10.jpg" />
</li>
<li id="thirdthumb" data-thumb="images/s/img9.jpg">
<img id="thirdimage" src="images/s/img9.jpg" />
</li>
<li id="fourththumb" data-thumb="images/s/img11.jpg">
<img id="fourthimage" src="images/s/img11.jpg" />
</li>
<li id="fifththumb" data-thumb="images/s/img3.jpg">
<img id="fifthimage" src="images/s/img3.jpg" />
</li>
</ul>
I have replaced images with following code:
$('#firstimage').attr('src', message[22]);
$('#secondimage').attr('src', message[23]);
$('#thirdimage').attr('src', message[24]);
$('#fourthimage').attr('src', message[25]);
$('#fifthimage').attr('src', message[26]);
here message[22]... are urls of images. its working perfectly. but i don't know how to replace thumb nails images. give me some idea. thank you.

Can you try this,
$('#firstimage').attr('src', message[22]).data('thumb', message[22]);

Try this
$('#firstthumb').data('thumb', message[22]);
OR
$('#firstthumb').attr('data-thumb',message[22]);

Do something on hover if sibling element hasClass

I have a list, which all include a link and an image each. Some of the images have a class which others do not.
<ul>
<li>
<a>link 1</a>
<img src="http://foo.com/" />
</li>
<li>
<a>link 2</a>
<img src="http://foo.com/" />
</li>
<li>
<a>link 3</a>
<img src="http://foo.com/" class="myClass" />
</li>
</ul>
I want to do something on hover of those links, but only if the associated image has that class.
This is what I'm currently trying:
$('ul li a').hover(
function() {
if ($(this).siblings('img').hasClass('.myClass')) {
console.log('it has the class');
}
});
What is the correct syntax for this?

You should not pass . to the hasClass method, remove it.
if ($(this).siblings('img').hasClass('myClass')) {
In case that classes are not added/removed dynamically, you can also use .filter() method:
$('ul li a').filter(function() {
// return $(this).siblings('img').hasClass('myClass');
return this.nextElementSibling.className.indexOf('myClass') > -1;
}).hover(function(){
// ...
});
Or + adjacent selector.

jQuery move node out of its parent

I have this code:
<ul class="list">
<li>
<a href="#" >
<img src="IMAGE" />
SOME TEXT
</a>
</li>
<li>
<a href="#" >
<img src="ANOTHER IMAGE" />
SOME DIFFERENT TEXT
</a>
</li>
</ul>
I want the images prepended to the parent node like this:
<ul class="list">
<li>
<img src="IMAGE" />
<a href="#" >
SOME TEXT
</a>
</li>
<li>
<img src="ANOTHER IMAGE" />
<a href="#" >
SOME DIFFERENT TEXT
</a>
</li>
</ul>

Try this:
$('.list > li > a > img').each(function() {
$(this).insertBefore($(this).parent());
})
Demo at http://jsfiddle.net/alnitak/3nEVz/
EDIT I came up with a cleaner version:
$('.list > li > a > img').each(function() {
$(this).parent().before(this);
})

$('ul.list img').each(function(_, elem) {
var $elem = $(elem);
$elem.prependTo( $elem.closest('li') );
});
demo: http://jsfiddle.net/hPbZD/1/

Try this:
$(function() {
$('ul.list > li > a > img').each(function() {
$(this).closest('li').prepend(this);
});
});
See it in action here.

jquery help with next() function

I have some HTML markup that looks like this,
</a>
<nav>
<ul>
<li><img src="/media/icons/view.jpg" alt="Views"/> 210</li>
<li><img src="/media/icons/like.jpg" alt="Likes"/> 45</li>
<li class="jobs">52 New Jobs</li>
</ul>
</nav>
<ul class="job_listings">
<li>Outbound Telesales Assistant ></li>
<li>Business Development Manager ></li>
</ul
</li>
The .job_listings is hidden on dom ready and needs to be show when li.jobs a is clicked, I have tried this with the following, jQuery:
$('#jobwall .jobs a').click(function(){
$(this).next('.job_listing').show();
return false;
});

You should get the next element of nav element and not the anchor, and also you are missing s in the .job_listing selector.
Try this:
$('#jobwall .jobs a').click(function(){
$(this).closest("nav").next('.job_listings').show();
return false;
});

Here you go:
$(this).closest('#commonContainer').find('.job_listings').show();