We Keep Coding

How to change specific element in a class?

I would like to edit a specific attribute from a class in css/JS/JQuery on hover of a different element, but I'm not sure how to do it
eg.
<h1 class="result">Lorium</h1>
<h1 class="result">Ipsum</h1>
<h1 class="result">Dolor</h1>
<img src="example.png" class="images"/>
<img src="example.png" class="images"/>
<img src="example.png" class="images"/>
so that when I hover on one of the <h1> tags, it will change the src of the <img>, but the rest will stay the same. Would I do this in CSS, JS or JQuery? How?
Note: they have to be classes, rather than id's, because I am using PHP to call all these elements and they have to be styled
thanks,
a tired programmer

Firstly you need to detect the hover / mouseenter on the H1 element with the class result.
I am going to assume that all your results have the class result.
$('.result:eq(0)').mouseenter(function(){
console.log("hello world");
});
Next you need to change the img src associated with the result - again I am going to assume all your imgs have the same class.
$('.result:eq(0)').mouseenter(function(){
$('.images:eq(0)').attr('src','https://via.placeholder.com/150x150')
});
I would suggest you to write a function so that you are not having to hardcode the nth value of the class selector.
Further reading: https://api.jquery.com/eq-selector/
If you are not using jQuery - similar logic but you will use document.querySelector('.result')[0] etc.
Further reading: http://mdn.beonex.com/en/DOM/Element.querySelectorAll.html
EDIT -- For nth value where n is the same index number for both result and images
$('.result').mouseenter(function(){
var nValue = $(this).index();
$('.images:eq('+nValue+')').attr('src','https://via.placeholder.com/150x150')
});

First of all, the structure of your HTML does not seem really scalable. I wouldn't count on order of elements. I would instead rewrite the HTML into something as the following:
<div class="result-container">
<h1 class="result">Result title</h1>
<img src="something.png" class="image" />
</div>
And then to handle events using jQuery, you can do something as follows:
function onHoverIn() {
const resultTitle = $(this);
const image = $(this).parent().find('.image')[0];
image.attr('src', 'something-hovered.png');
}
function onHoverOut() {
// same logic
}
$('.result-container .result').hover(onHoverIn, onHoverOut);
Hope that helps!

In jQuery, typically you can change an image like this:
$(".images").attr("src","second.jpg");
But as you can see, because all the images have same class you probably won't achieve what you are looking for. You need something to differentiate images from each other if you are looking to map them to the header tags.
Since you have multiple, you are probably looking at something like:
$('.images').each(function() {
//count the index and flip the image
});

append and replace content to different elements background-img property

I want to get the first instance of a specific div content, which is an image. And then I want to append this image content to the background property of a second element (to appear as background image content), is this possible with jQuery?
I'd preferably also like it to replace an existing background image content from the second div element if one exists. Then of course if it doesn't exist it would be creating it and populating it with image content of div element 1.
$('.element1').find('img:first').appendTo('.element2');

Assuming your HTML structure looks like:
<div class="element1">
<img />
</div>
<div class="element2">
</div>
What you're looking for is:
var getImageSrc = $('.element1 img').attr('src');
$('.element2').css('background-image', 'url(' + getImageSrc + ')');
I've created a fiddle showing this here.
Hope this helps! :)

How to select img tag inside the current div with jsoup

I try to parse web page using the jsoup, where I select element using the select method of the jsoup. I want to next element in the div.
My page source is
<a class="class" href="href" title="title">
<img src="src" alt="alt"/>
</a>
I select the class element using the
Elements element = doc.select(".class");
I got result in the element but I want to get image src also. How can I get it?

You can get an attribute's value with the following method: attr(String key)
Example:
// Selects the first instance of img within .class
Element element = doc.select(".class img").first();
// Gets the value of the element's src
String src = element.attr("src");

Take alt tag from image and place into div

I'm trying desperately to clone an alt tag, and append it to a sibling div. I'm close I think, but I think I'm missing a key feature.
<div class="project_tile">
<p>
<a class="blog_thumb" href="/work?title=personal-trainer-website-design">
<img src="img_cms/projects/thumb-revolution_230x276.jpg" width="263" height="121" alt="Personal Trainer Website Design">
<div class="hover"></div>
</a>
</p>
</div>
trying to take the alt tag and append it to div.hover
$(".project_tile p .hover").html( $(".project_tile p img").attr("alt") );
There are a series of sibling .project_tiles in a container all with the same markup (but diifferent images with different alt tags)
The alt tag from the first image is transferring to ALL the project tiles, but just need it to clone it to the .hover in the same .project_tile...
hover a project tile here http://fifteenten.s1lver.co.uk/work to see what I'm on about
I'll be damned if I can figure how to limit it to 'this' project tile... though I'm sure the word 'this' needs to be used somewhere...
any help massively appreciated as always!!

If you have multiple project_tile elements then you need to find the relative alt value, in this case the img is the previous sibling of the .hover element.
So try
$(".project_tile p .hover").html(function () {
return $(this).prev().attr('alt')
});
Demo: Fiddle

How can I get img src and text from distant elements using JQuery?

Could you please lend a hand as I am having some trouble getting the text of a heading and the source of an image element in order to create a list of the item clicked. But I will explain better with some code:
Firstly I have a div element that goes like this:
<div class="main_page_entry">
<div class="main_item_desc">
<img class="main_item_pic" src="blah.jpg" />
<h6>Item Title</h6>
<span class="icon"> <img src="icon.png" /></span><br />
<span class="address">Some address</span>
<p class="item_desc">More blahs and links for description </p>
</div>
<div class="item_controls">
...
<a href="#" class="add_to_list">
<img src="add_icon.gif" />Add to List
</a>
...
</div>
</div>
It consists with a big div containing two smaller. What I want to do is the following: When I click on 'Add to List' link, I would like to get just the text inside and the main_item_pic source in order to create a list item with those two.
So here is my written code so far:
$('a.add_to_list').live('click', function() {
var name = $(this).closest('h6').text();
var source = $(this).closest('.main_item_pic').src;
$('<li class="hide list_entry"><span class="entry_title">'+
name+'</span><button class="remove_entry"></button>'+
'<img class="list_entry" src="'+source+'" /></li>')
.appendTo('#favs_list ul')
.show('slow');
});
Obviously this doesn't work! I've tried different solutions that I read around here like:
var name = $(this).closest('h6').html();
var source = $(this).closest('.main_item_pic').attr('src');
but oh well...no luck so far. Any ideas? Thanks in advance!

Try going back to the top and coming down again along the right DOM branch:
var src = $(this).closest('.main_page_entry') // Back to the top
.find('.main_item_desc .main_item_pic') // And down again.
.attr('src');
The closest method goes up the DOM tree through your ancestors:
Get the first ancestor element that matches the selector, beginning at the current element and progressing up through the DOM tree.
So it won't cross over to any of the sibling branches. Then, once you're at the appropriate ancestor, you use find to come back down, find is just like $() but uses the specified element rather than document as the root:
Get the descendants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element.

The closest method only finds the closest ancestor that matches the selector you pass it. Because the h6 and img you are looking for are not ancestors of the element you are calling it on, it won't find them. What you need is to find the closest element that contains both the element you are searching from and the elements you are trying to find, and use it as an intermediate step in the search:
var name = $(this).closest('.main_page_entry').find('h6').text();
var source = $(this).closest('.main_page_entry').find('.main_item_pic').attr('src');

First off, if this content isn't added dynamically or in a live manner (in other words, if the content is loaded with the original HTML load) then you do not have to use the .live() function.
Also, why are you using .closest()? Couldn't you just do:
<img class="main_item_pic" ref='pic1' src="blah.jpg" />
<a ref='pic1' href="#" class="add_to_list">
<img src="add_icon.gif" />Add to List
</a>
$('a.add_to_list').click(function(){
var ref = $(this).attr('ref');
var src = $("img[ref='" + ref + "']").attr('src');
var name = $('h6 a').text();
});

The method closest() looks for ancestors. Your h6 and img are not ancestors of your link.
Also, I guess you don't want $('h6').html() but $('h6 a').html()