append and replace content to different elements background-img property - javascript

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! :)

Related

Javascript How Can Change HTML

I have this HTML item.
<div class="inner" id="durum260" style="display: block;"><img src="/Content/plugins/images/teslim_edildi.png"></div>
This functions are works.
$('#durum260').hide();
$('#durum260').show();
How can I change bottom code with JS?
<img src="/Content/plugins/images/teslim_edildi.png"></div>
to
<img src="/Content/plugins/images/new_image.png"></div>
document.getElementById('drum260').firstChild.src = "/Content/plugins/images/new_image.png";
const img = document.querySelector('#durum260 > img');
img.src = img.src.replace('teslim_edildi', 'new_image');
Although the other answers have correctly specified methods of altering the src attribute of the image in your specific code sample, I would suggest adding an id attribute to the image element and targeting it using document.getElementById().
This will protect you in the event that your DOM tree changes. For example, if you add another image to the <div>, the image you want to change the src attribute on may no longer be the first image, so you would end up changing the src on the wrong one.
Similarly, if you add any other HTML element to the <div> before your image, it would no longer be the first child.

JQuery loop duplicate result

Currently I have a list of elements for an isotope page. The basic markup for an element is:
<div class="element conference-box"> <img src="#" class="conference-image" alt="">
<div class="caption">
<div class="confback"></div>
<h3 class="conference-title"></h3>
<h4 class="conference-details"></h4>
</div>
</div>
There around 30 or so elements on the page.
I've been trying to use jQuery to take the image with the class "conference-image" and apply it as a background image to the .confback div, while retaining the original image. I had some success using this code:
$('.element').each(function() {
var getImageSrc = $('.conference-image').attr('src');
$('.confback').css('background-image', 'url(' + getImageSrc + ')');
return true;
});
However, my script takes the image from the very first element and applies that as the background image for every .confback div in every element on my page. Obviously, I would like each individual element to use the image that has been used in that particular element.
Within the .each callback, the this variable will be the .element that's currently being looped over. You can use that to search within just that element for the img and div you want to work with by re-wrapping it with jQuery and using the find method:
$('.element').each(function() {
var getImageSrc = $(this).find('.conference-image').attr('src');
$(this).find('.confback').css('background-image', 'url(' + getImageSrc + ')');
});
Also note, the documentation for .each says:
Use return false to break out of each() loops early.
That doesn't mean you have to use return true to continue the loop, not returning anything is also valid - so I removed it from my example above.
Inside your .each function $(this) will be the elements with class element. You want to use the attributes and css of it's descendants, found using find:
$('.element').each(function() {
var getImageSrc = $(this).find('.conference-image').attr('src');
$(this).find('.confback').css('background-image', 'url(' + getImageSrc + ')');
});

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

Save the parents children in a var to append later

I have a markup in one of my website pages as follows:
<div id="mainPage">
<div>
<div><ul><li>etc.</li></ul>
</div>
<div>
<div><ul><li>etc.</li></ul>
</div>
</div>
What the above means is that there's a main div in my website which has the content. I want to take all the children of the particular div and save it in a var, since I want to use that var later for something like $('resurrectPage').append(someVar); where someVar has the dom elements from the main page div.
How can all the children of a particular element be selected and added to a var?
$('#mainPage').html() would give you the entire thing in a string "<div>
<div><ul><li>etc.</li></ul> </div> <div> <div><ul><li>etc.</li></ul> </div>"
$('#mainPage').children() would give you immidiate children [div,div]
$('#mainPage').find('.div') would giv =e you all the divs inside it [div,div,div,div]
if #mainPage is your main div, you can get of it's children by
var someVar = $('#mainPage').children();
Official api page
I think you're looking for jQuery detach method...
http://api.jquery.com/detach/
It will remove an element and store its contents, ready to be re-appended:
var a = p = $("a").detach()
If you only need the HTML you can save the HTML: var someVar = $("#mainPage").html(); and then append the HTML with the code you already have. Please tell me if I have misunderstood your question.

jQuery append to dynamicly created child div

I am trying to append text to a div which has been dynamically created. Within this div there are 2 child divs, one for title and one for the body.
This main div is droppable, however I want that when the item is dropped, the text enters into the child div "body".
I currently have the following code which appends the text to the main div.
$($(this)).append(draggableText + '<br>');
The name of the child div is #catPileBoxBody
However there are 3 of these which have been dynamically created. So is there a way of inserting the text into something like:
$($(this."CHILD called #catPileBoxBody")).append(draggableText + '<br>');
Any help would be massively appreciated! I have been stumped on this for AGES!
$(this).find("#catPileBoxBody").append(draggableText + '<br>');
But as you should have only one element with a given ID, you should be able to simply do
$("#catPileBoxBody").append(draggableText + '<br>');
The fact that the divs have been created dynamically changes nothing.
You can append it in the following manner
Edited:
$(this).find('div.yourClass').append(draggableText + '<br>');

Categories