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 set id to an element in jquery?

Basically I am creating x amount of image boxes using jquery append() function with all having the same class name, But now I need to set each box id to i. for avoiding confusion this is what I mean:
for(i=0;i<10;i++){
$('.d').append('<img src="" class="UP__" width="120" height="120">');
$('.d img').attr("id",i);
}
The problem with above code i'm facing is that it sets all 10 img boxes id to 10, But I need to set first box id to 1, second to 2 and so on.
My question is how to set each element id to value of i.
Thanks in advance

Just add id to img tag
$('.d').append('<img src="" id="'+i+'" class="UP__" width="120" height="120">');

First declare your variables (whether using var or let) in order to avoid created global variables, and then you can either add the id within the loop:
for(let i=0; i<10; i++){
$('.d').append('<img src="" id="' + i + '" class="UP__" width="120" height="120">');
}
Or do so outside of the loop:
for(let i=0;i<10;i++){
$('.d').append('<img src="" class="UP__" width="120" height="120">');
}
// here we select all the matching <img> elements, and update
// 'id' property using the prop() method, and the anonymous
// function:
$('.d img').prop('id', function (index){
// 'index' is the index of the current element in
// the jQuery collection over which prop() iterates:
return index;
});
The problem with your posted approach was that you were selecting all the matching elements (in each iteration of the loop) and setting the id of all those elements to the same number. This is avoided by both approaches shown above.
Note that using a numeric character as the first character of an id does complicate the CSS selectors used to target those ids as you first need to escape the number character.
With that in mind, to select the element with id="1" you'd need to use:
#\31 {
/* css */
}

You don't need to give an ID. Just use each function of jQuery.
I added the images manually, but you can make it of course dynamic using your own code.
<div class="d">
<img src="http://afterishtar.pl/images/100x100.gif">
<img src="http://afterishtar.pl/images/100x100.gif">
<img src="http://afterishtar.pl/images/100x100.gif">
<img src="http://afterishtar.pl/images/100x100.gif">
<img src="http://afterishtar.pl/images/100x100.gif">
</div>
Then this.
$(document).ready(function() {
$(".d img").each(function( index ) {
console.log(index);
});
});

Its because you are adding the id to all img tags inside the .d div.
PS: Always have the image src tag properly set. An empty src for image tag creates a lot of problems than it solves. if src is not known or set later, use about_blank.
Also, its always a good recommendation to change the dom as minimal times as possible. When possible, append newly created elements once all the manipulations are complete and before attaching them to DOM.
$(function() {
for (i = 0; i < 10; i++) {
var $img = $('<img src="about_blank" class="UP__" width="120" height="120">');
$img.attr("id", i).attr("title", i);
$('.d').append($img);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="d"></div>

How to select some elements and append a div after them?

I've bene bursting my head for the last few hours. Here's the situation:
I have a website that has many divs, but many of them share classes (they are equal) but have some different texts. Example:
<div class="summary-title">
I Am That Girl</div>
<div class="summary-title">
I Am That Girl</div>
What I want to do is select each one of these divs and add a span whenever another div is hovered.
I mean, this is what I want to do: hover a div that's before the sumary-title div, a span with a class is appended inside the sumary-title div or out of it, whatever works.
That's what I got so far:
$('summary-title').each(function(index) {
var content = $(index).next().text();
$(index).append("<span class='hover-text'>"+content+"</span>");
});
But I get an error that $ is not defined, probably because it is a closure?
I have no idea what to do. The code seems horrible too — i need to do this quickly and I just can't do. Would anyone help me at least know what to do?
Thanks

append() is already an implicit iteration ( that loops through the set of elements in the jQuery collection.) and it's unnecessary to call .each() .
$('.summary-title').append(function() {
return "<span class='hover-text'>" + $('a', this).text() + "</span>";
});

Outside of making sure you have jQuery on your page and properly referring it, your code should go like:
$('.summary-title').each(function() {
var content = $(this).children('a:first').text();
$(this).append("<span class='hover-text'>"+content+"</span>");
});
Notice:
dot in class selector - $('.summary-title')
this instead of index - $(this)
children selector instead of next
Check demo - Fiddle.
To append this to a preceding element on hover use:
$(document).ready( function() {
$('.summary-title').hover( function() {
var content = $(this).children('a:first').text();
$(this).prev().append("<span class='hover-text'>"+content+"</span>");
});
});

jquery select class inside parent div

I'm trying to change the alt of the image, I'm clicking by
selecting the image's class (add_answer)
Note: .add_answer shows up multiple times inside different containing div's
jQuery(function(){ // Add Answer
jQuery(".add_answer").click(function(){
var count = $(this).attr("alt");
count++;
$('.a_type_'+count+'').show();
$(this).parents("div:first").$('.add_answer').attr("alt", count);
});
});
This line doesn't seem to be working, how do I select this add_answer class by way of it's parent div
$(this).parents("div:first").$('.add_answer').attr("alt", count);
Anyone else have an idea?
I'm trying having trouble decreasing the alt value on the .add_answer image when .destroy_answer is clicked
jQuery(function(){ // Hide Answer
jQuery(".destroy_answer").click(function(){
$(this).parents("div:first").hide();
var count = $('.add_answer').attr("alt");
count--;
$('.add_answer',$(this).parent('div:first')).attr('alt',count);
});
});
Problem line:
$('.add_answer',$(this).parent('div:first')).attr('alt',count);

you can use the parent div as the scope:
$('.add_answer',$(this).parent('div:first')).attr('alt',count);

This should work:
$(this).parent("div").find(".add_answer").attr("alt", count);

You code is almost correct. Required change is to use .find instead of .$ after .parents method. Use of .parent instead of .parents should be avoided, this way your code will be more unobtrusive (precisely - this way img can be non-direct child of the div).
$(this).parents('div:eq(0)').find('.add_answer')
You can manipulate :eq(0) to select eg third parent div using :eq(2).