<div class="e1">
<p><img alt="" src="/images/site/pr1.png" /></p>
</div>
<div class="e1">
<p><img alt="" src="/images/site/pr2.png" /></p>
</div>
<div class="e1">
<h1> My new h1 </h1>
</div>
How is it possibe to take the content of img src element of the first two div tag which class e1?
Simply use the querySelectorAll method on document. You can then map the returned NodeList to an array of src attributes.
var images = document.querySelectorAll('.e1 img[src]'),
sources = Array.prototype.map.call(images, function(img) {
return img.src;
});
I've used the above selector '.e1 img[src]' to make sure that the returned NodeList only has images with src attributes.
JSFiddle Demo ~ http://jsfiddle.net/u9Lkada3/1/
Don't forget! You need to run the script after the elements exist in the document. The easiest way to ensure this is to put your script at the end, just before the closing </body> tag.
Related
I have a div like the following
<div id="basedata-legend-land" class="legends">
<p class="update_villages_2013">Villages</p>
<p><img src="url" alt="legend" class="update_villages_2013"></p>
<p class="district_boundaries">District Boundaries</p>
<p><img src="url" alt="legend" class="district_boundaries"></p>
</div>
As you can see, i have used the same class name for p element and the img inside the other p element. I want to remove these elements when clicking on a button based on the class name. For that i did something like this
$(`.legends .update_villages_2013`).remove();
This works but when the img is removed, it leaves a empty p element. I want to remove that as well. So basically if i run this code
$(`.legends .update_villages_2013`).remove();
this is how the div should appear
<div id="basedata-legend-land" class="legends">
<p class="district_boundaries">District Boundaries</p>
<p><img src="url" alt="legend" class="district_boundaries"></p>
</div>
I couldn't just use the parentNode property because if i do, it will remove the main div as well.
You can use :has() to select elements that have a matching descendant.
$(`.legends *:has(.update_villages_2013)`).remove();
$(`.legends .update_villages_2013`).remove();
I have the following code
<div id="ad">
<div id="adsensebanner">
<iframe id="google_ad_randomnumber">
</iframe>
</div>
</div>
and I'm searching of a way to make it like this, using jQuery and CSS attributes matching:
<div id="ad">
<div id="adsensebanner" class="addedclass">
<iframe id="google_ad_randomnumber">
</iframe>
</div>
</div>
Any ideas for searching for div that has another parent div and appending a class to the child one?
Your comments on various answers suggest your HTML is invalid and has more than one id="adsensebanner" in it, but just one id="ad" in it.
Your best bet is to make the HTML valid. There can be only one element with id="adsensebanner" in it.
However, if for some reason you want to only target that one element when it's inside id="ad":
document.querySelector("#ad #adsensebanner").classList.add("addedclass");
or with jQuery:
$("#ad #adsensebanner").addClass("addedclass");
That says "Add 'addedclass' to #adsensebanner only if it's inside #ad." There can be valid use-cases (if the one element with id="adsensebanner" may or may not be within #ad and you don't want to add the class if not), but they're rare.
If you correct the HTML to only have one id="adsensebanner", and you always want to add the class, then:
document.getElementById("adsensebanner").classList.add("addedclass");
or with jQuery:
$("#adsensebanner").addClass("addedclass");
In a comment you've said:
The double division check will definately work, however, my second div's ID name varies, so I would like to have it selected via an attr, like div[id*='adsensebanner']. Is there any workaround for this?
Yes, you can use any of the attribute substring selectors. For instance, if the id will always start with adsensebanner (id="adsensebanner1", id="adsensebanner2", etc.), then the selector to use with querySelector or jQuery would be "#ad div[id^=adsensebanner]". (Or you can use the contains one you mentioned, *=, or $= if it always ends with something.)
Try below:
$('#adsensebanner', window.parent.document).addClass("addedclass");
Simple JS can do the trick. And I can't see this div is inside the iFrame.
var p = document.getElementById("ad");
p.querySelector("[id='adsensebanner']").classList.add("addedClass");
<div id="ad">
<div id="adsensebanner">
<iframe id="google_ad_randomnumber">
</iframe>
</div>
</div>
This is only by JavaScript:
document.getElementById("ad").getElementsByTagName("div")[0].classList.add("addedClass");
$( "#ad div:nth-last-child(1)" ).addClass("addedClass");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ad">
<div id="adsensebanner">
<iframe id="google_ad_randomnumber">
</iframe>
</div>
</div>
<div id="ad1">
<div id="adsensebanner">
<iframe id="google_ad_randomnumber">
</iframe>
</div>
</div>
This will add a class only to div which have parent div id="ad"
I did some research and there are many questions about changing src of an image in JavaScript. However I want to change src of three images when clicking on button at once.
HTML:
<ul class="items-list">
<li>Shoes</li>
<li>T-shirts</li>
</ul>
<div class="item"><img src="img/t-shirt.jpg" alt="" class="items" id="imgChange">
<div class="item"><img src="img/hoodie.jpg" alt="" class="items">
JavaScript:
function changeImage(){
let change = document.querySelector('#imgChange').src="img/shoe.png";}
So this code works perfectly but it changes only one image. I want to change 2 or more images at one click. I've tried to get element by class but it still changes only first image. So in this case I want to change image in the second div too. Thanks in advance!
document.querySelector selects only the first element and document.querySelector('#imgChange') will select first element which have the id.Use document.querySelectorAll('img') it will select all the img tag. Use forEach to iterate the loop and change the src
function changeImage() {
let change = document.querySelectorAll('img').forEach(function(item) {
item.src = "img/shoe.png";
})
}
<ul class="items-list">
<li>Shoes</li>
<li>T-shirts</li>
</ul>
<div class="item">
<img src="img/t-shirt.jpg" alt="" class="items" id="imgChange">
</div>
<div class="item">
<img src="img/hoodie.jpg" alt="" class="items">
</div>
querySelector() method returns the first element that matches a specified CSS selector(s) in the document.
Try
var elements = document.getElementsByClassName(names)
to get all elements with the same class name. Or, try var element = document.getElementById(id) for finer selection.
I need to swap the image out when it's moused over. It should be using innerHTML as well I believe.
<body>
anime
ponies
<h1 class="panel">What fandom is better?</h1>
<div class="anime"> <img src="img/anime.png"> </div>
<div class="pony"> <img src="img/pony.png"> </div>
<p id="answer">Choose One</p>
</body>
/**
This is for element changes upon mousesing over of the area
*/`
document.getElementsByClassName("anime")[0].onmouseover=
function(){
orangeBorder1();
mouseAnime();
}
document.getElementsByClassName("pony")[0].onmouseover=
function(){
orangeBorder();
mousePony();
}
function mousePony(){
document.getElementById("pony").src="pony1.png";
}
I don't know if your code is copied wrong but you don't have anything with an id of pony
getElementById will look for a tag with an attribute of id, specify that and your code should work.
id should be unique within the page. You should also give the div a id too instead of querying on the classname
In html I have a lot od DIVs with names(yes, names, not IDs) respectively p001, p002, p003... which are like this:
<div id="pole" name="p001"><img src=""></div>
<div id="pole" name="p002"><img src=""></div>
<div id="pole" name="p003"><img src=""></div>
etc...
In Javascript I have defined variable called 'pos' which contains a number, for now: "284"
and a function which should change img src to "player.png".
I tried 2 ways and none of these work:
document.getElementsByName('p'+pos).innerHTML='<img src="player.png">';
and
document.getElementsByName('p'+pos).getElementsByTagName("img").src="player.png";
How to change img src which is in specified DIV?
getElementsByName returns a list of elements, not a single element, so try:
document.getElementsByName('p'+pos)[0].
getElementsByTagName("img")[0].src="player.png";
You have to select the all "img" tags in html code. And then you can change the element's src in body or specified element.
images = document.querySelectorAll("#content_image img");
First of all, I think you should switch name and id attributes on your div tags. You CANNOT have multiple elements with the same id but you can have multiple elements with the same name.
<div name="pole" id="p001"><img src=""></div>
<div name="pole" id="p002"><img src=""></div>
<div name="pole" id="p003"><img src=""></div>
To solve your problem you can use the firstChild property of DOM if the img will always be the first child of your div tag.
document.getElementById('p'+pos).firstChild.src="player.png";