Develop Reference

Change image with only jquery or javascript

I am trying to change an image from an old to new using jquery or javascript only. It is the second picture out of three total that has a common parent element and is not separated by any specific parameters.
I believe I need to use a DOM navigation of some sort to get to the exact picture in the common class but haven't had any luck.
As I mentioned the 'make' class is shared between all three images as is 'make-image'. I need to simply swap the image for another updated version, facebook1.jpg.
<li class="make ">
<a href="#">
<img class="make-image" src="facebook.jpg">
<div class="make-info">
<img class="make-logo" src="facebook.jpg">
<div class="clearall"></div>
</div>
</a>
</li>
It should simply swap the existing image for another.

You can query for the image tags inside the list-item and iterate with each over the returned array. Inside that loop you can check if the src of that image-element is what you are looking for and replace it.
$('li.make img').each(function(index){
if ($(this).attr('src') == 'facebook.jpg') {
$(this).attr('src', 'facebook1.jpg');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li class="make">
<a href="#">
<img class="make-image" src="facebook.jpg">
<div class="make-info">
<img class="make-logo" src="facebook.jpg">
<div class="clearall"></div>
</div>
</a>
</li>

change src of img element by jquery

How to change src of element img?. I want to change this attribute to other, when cite has only one class : user. How to do it? In this case there should change src in img '//img1.blogblog.com/img/blank.gif' to another. Source of img '//somethingelse.gif' should remain the same.
<ol id='bc_0_4TB'>
<li id='bc_0_2B' class='comment' kind='b'>
<div class='avatar-image-container'>
<img src='//img1.blogblog.com/img/blank.gif'></img>
</div>
<div id='c5653317936849872669' class='comment-block'>
<div id='bc_0_2M' class='comment-header' kind='m'>
<cite class='user'>Anonymous</cite>
</div>
</div>
</li>
<li id='bc_0_3B' class='comment' kind='b'>
<div class='avatar-image-container'>
<img src='//somethingelse.gif'></img>
</div>
<div id='c5653317936849872670' class='comment-block'>
<div id='bc_0_2M' class='comment-header' kind='m'>
<cite class='user blog-author'>Author</cite>
</div>
</div>
</li>
</ol>

I want to change this attribute to other, when cite has only one class
: user
You can use:
$('cite[class="user"]').closest('li').find('img').attr('src','newSrc');

To change the src attribute using jquery, just set it using the .attr() function. http://api.jquery.com/attr/
For the logic to change it only when you want to change it. Please show us what you have tried already.

Change border of last row clicked in a dynamic table (using <ul>)

Here is my fiddle : http://jsfiddle.net/rshutxpj/3/
As you can see, when you click on the rows, there is a little border appearing. I basically want to only have the border change on the last row clicked, but I don't know what event to use to bring the previous row I clicked with no border. What would be the best way to do that?
P.S. I cant use the any type of "losefocus" or similar, because I got many table on my page and the last row clicked on this particular table need to stay visible to the user. Think it the same way as many groups of radiobox.
Here is the code:
<ul class="UploadTable" data-role="listview" data-inset="true" data-icon="false" style="min-width:350px">
<li style="text-align: center !important">
<label>UPLOAD SCHEDULE</label>
</li>
<li data-role="list-divider">
<div class="ui-grid-b">
<div class="ui-block-a" style="width:33%">Header 1</div>
<div class="ui-block-b" style="width:34%">Header 2</div>
<div class="ui-block-c" style="width:33%">Header 3</div>
</div>
</li>
<li id="addedTargetRow" class="fitting">
<a href="#" onclick="this.style.border='2px solid #000099;'">
<div class="ui-grid-b">
<div id="THW_ID" class="ui-block-a" style="width:33%">info1</div>
<div id="POS" class="ui-block-b" style="width:34%">info2</div>
<div id="IP" class="ui-block-c" style="width:33%">Info3</div>
</div> </a> </li>
<li id="addedTargetRow" class="fitting">
<a href="#" onclick="this.style.border='2px solid #000099;'">
<div class="ui-grid-b">
<div id="THW_ID" class="ui-block-a" style="width:33%">info1</div>
<div id="POS" class="ui-block-b" style="width:34%">info2</div>
<div id="IP" class="ui-block-c" style="width:33%">Info3</div>
</div> </a> </li>
<li id="addedTargetRow" class="fitting">
<a href="#" onclick="this.style.border='2px solid #000099;'">
<div class="ui-grid-b">
<div id="THW_ID" class="ui-block-a" style="width:33%">info1</div>
<div id="POS" class="ui-block-b" style="width:34%">info2</div>
<div id="IP" class="ui-block-c" style="width:33%">Info3</div>
</div> </a>
</li>
</ul>

You have duplicate IDs.
Why do want to have onclick on each anchor.(removed in demo)
Use this JS
$(document).on('click', '.fitting', function () {
$('.fitting').removeAttr('style'); // removes all previous borders
$(this).css('border', '2px solid #000099')// add border to current element
})
Demo
Warning:As you have only border in style attribute , removing it will not effect anything, Suppose if you have other styles along with border don't use .removeAttr('style'); , Use .css('border', 'none') like below
$(document).on('click', '.fitting', function () {
$('.fitting').css('border', 'none')// removes all previous borders
$(this).css('border', '2px solid #000099')// add border to current element
})
Update :
If there are multiple tables then use this $(this).parents('table').find('.fitting').css('border', 'none')
this finds the fitting elements of the table in which the row is clicked, excluding the same elements in other tables in DOM

NOTE: #J Santosh's answer will toggle all links in all of the tables and the question mentioned that there are multipe tables on the page would all lose their highlighting.
Having your onclick links on the list items will make this messy and is not performant (as I'll go thru below). To stay within The solution you are looking for is:
onclick="var links=this.parentNode.parentNode.querySelectorAll('.fitting a') || [], i = links.length; for (;!!i;i--) { links[i].style.border='none'; } this.style.border='2px solid #000099';"
This will make sure you are only removing the highlighted row from that table.
HOWEVER, There are some very concerning things about this structure.
Your id's are not unique. You should remove the id attributes.
You can use the href=javascript:"/* onclick stuff goes here */" instead of adding an onclick attribute.
There is no need to use anchor tags in the li as you are doing. Adding extra DOM items makes your DOM heavier and the page slower. I suspect you are only adding those because you want the pointer icon. You can fix that with CSS.
Your onclicks will all need to be updated the same way and makes your code less reusable. Adding eventHandlers to every li also is expensive in that the function isn't cached and requires extra resources for each DOM element.
Setting the style purely in javascript might be better done in CSS since it will be tied to your page layout styling. Create a class called "selected" or something similar and add the class onclick.
SO here is how I would code it:
HTML:
REMOVE ALL OF YOUR LINKS! You are using anchor tags wrong! Also, remove all of your id's.
CSS:
li.fitting { cursor: pointer; }
li.fitting.selected { border: 2px solid #000099 }
Javascript:
$(function(){
$('li.fitting').on('click', function() {
$(this).siblings().removeClass('selected');
$(this).addClass('selected');
});
});

You could use the HTML state of :focus and the JS "blur" event, hooked using the HTML attribute onblur. So, you would amend your onclick to this.style.border='2px solid #000099';this.focus(); and add onblur="this.style.border='none';" to that same link.

Find the previous occurrence of an element filtered by class

I have a php loop that print a lot of html in this form:
<div class="something">
...
<img class="prod-img" src="What-I-Need"/>
</div>
<div class="buttons" data-description="Some text here...">
<a class="activator">Click me!</a>
</div>
That piece of code is repeated many times. Usig jQuery I manage to get the description content using the parent selector just by:
$('.activator').click(function() {
alert($(this).parents('.buttons').data('description'));
})
Since $(this) have a parent with the field I need, that js code is working great, I wonder now, how can I retrieve the src content of the class prod-img? since is outside the parent div...

If they are grouped like this
<div class="container">
<div class="something">
...
<img class="prod-img" src="What-I-Need"/>
</div>
<div class="buttons" data-description="Some text here...">
<a class="activator">Click me!</a>
</div>
</div>
<div class="container">
.....etc....
You can get prod-img by using .closest() and .find()
var src = $(this).closest('.container').find('.prod-img').attr('src');
Otherwise you need to use .parent() .prev() and .find() which is very static making it harder to change the HTML markup without changing the code.
var src = $(this).parent().prev().find('.prod-img').attr('src');

I want to show the slider div until the mouse is over the container div with many inner divs in jquery?

I have a container containing two divs A nd B
A contains few img tags while B contains a slider ..
The structure is as follows
<div id="container">
<div id="mainCHimage">
<img id="favIcon">
<img id="mainImg">
</div>
<div id="imageSlider">
<img class="arrow left">
<div class="images" id="images_zazzle_tshirts">
<div class="imageHolder catMatchB" style="display: block;">
<a href="http://productUsage.php?prodId=39" target="_blank">
<div class="sliderImgWrp">
<img src="../shop/uploads/large/1367904170_link-10351582.jpg">
</div>
</a>
</div>
</div>
<img class="arrow right">
</div>
</div>
I just want the imageslider shud stay until i am mouseout of whole container div..But inner div comes and are conflicting .. i have written the jquery functions ..U cn check in my demo ... Plz help me out...
Not working demo

Do not use mouseout or mouseover events but mouseenter and mouseleave - they trigger only if you enter/leave the element you attached them to; 100% no conflicts.