I have this :
<div class="blog-page-nav-previous">
<<Previous
</div>
I'm trying to find all instances of the class blog-page-nav-previous and replace the text inside the <a> tag: <<Previous with an image of my own.
How do I do that?
Since you're asking for a jQuery solution:
// Select all the <a> tags inside .blog-page-nav-previous and change their innerHTML to an <img> tag:
$('.blog-page-nav-previous a').html('<img src="foo.jpg">');
<div class="blog-page-nav-previous">
<<Previous
</div>
You could try this
var a = document.getElementsByClassName("blog-page-nav-previous");
a.forEach(function(a){
a.outerHTML = '<img src="images/image.jpg" alt="image">'
});
If you are trying to only replace the contents of the element you could replace a.outerHTML with a.innerHTML
I think you want the image to work as a link, if yes then I have a solution for you
<div class="blog-page-nav-previous">
<img src="example.png">
</div>
This should work and sorry if this is not the answer you want
This should work:
var myClasses = document.getElementsByClassName("blog-page-nav-previous");
for (var i = 0; i < myClasses.length; i++) {
myClasses[i].innerHTML = "<img src='image.jpg'>";
}
<div class="blog-page-nav-previous">
Previous
</div>
If you want the image to have keep the same link as what "Previous" is set as, change the getElementByClassName to look for "my-link" instead of "blog-page-nav-previous"
Related
I'm working on a project where there are tiles of different pictures and I want to pass the value to another page when an image is clicked on. Since <img> doesn't have a value attribute, I tried to wrap an <a> tag around the image as follows, although it does the job, the format of the image is messed up. Is there a better way to do this that doesn't mess with the format of the image? Thank you for your help.
<a href="results.inc.php?value=gpu" onclick="post">
<img src="https://via.placeholder.com/200.jpg" alt="" class="cardImg">
</a>
Based on your comment, the most "harmless" way to do it would be JavaScript, adding a custom attribute to the image for the value you want it to pass in the onClick method.
document.addEventListener("DOMContentLoaded", function() {
var allCards = document.querySelectorAll(".cardImg");
for(i = 0; i < allCards.length; i++) {
var value = allCards[i].getAttribute("data-card-value");
allCards[i].addEventListener("click", function() {
document.location.href = "results.inc.php?value=" + value;
});
}
});
.cardImg {
cursor:pointer;
}
<img src="https://via.placeholder.com/200.jpg" data-card-value="gpu" alt="" class="cardImg">
I am new to jquery and was wondering how I can point one html element equal to another. I want to make it so that whenever something in the h2 tag changes, the text within the p tags will copy the change. Below is how my tags are set up within the class fc-center.
var title = $('div.fc-center h2').text();
$('.fc-center').append('<p>'+'' +'</p>');
with the html looking something like
<div class = 'fc-center'>
<h2> text text</h2>
<p> </p>
</div>
essentially what I want to do is something like this :
$('div.fc-center p').equalto $('div.fc-center h2')
But I am not quite sure how to go about it
I propose this solution:
var title = $('.fc-center').find('h2').text();
var elementsP=$('.fc-center').find('p');
if (elementsP.length > 0) {
$.each(elementsP, function(i, val) {
$(this).empty().html(title);
});
}
https://jsfiddle.net/julian9319/grc0y6qf/1/
Sorry for my English
When i put this code into Source:
<span><div>TEST</div></span>
And then ckick in Source, and then click again, it show this code:
<div><span>TEST</span></div>
<span></span>
My config:
CKEDITOR.dtd.$removeEmpty['i'] = 0;
//CKEDITOR.dtd.$removeEmpty['span'] = 0;
config.fillEmptyBlocks = false; //OR TRUE - the same problem
I found How to display a <div> element inside a <span>? that is not correct way: Wrap a div in span
What is the problem?
try this for Source:
<div><span>Test</span></div>
i am trying to Append spans in a div. Below is my div code
<div
id="paragraph"
class="paragraph"
name="paragraph">
</div>
This is code i am implementing in my Controller
$scope.style_Text = {color:'#F00'};
for(var i = 0; i< $scope.paragraph.length; i++)
{
var span = "<span ng-style='style_Text' id='c"+i+"'>"+$scope.paragraph[i]+"</span>";
$( ".paragraph" ).append($(span));
console.log(span);
}
Spans are added in the div, but style is not applied. When i copy the span from console and place it above div. This span is working fine. Style is applied on it.
I have tried putting style='color:red;' instead of ng-style, It also works.
Please help how to use ng-style here. Thank
What for u doing this? Thats bad pattern.
Your HTML:
<div
id="paragraph"
class="paragraph"
name="paragraph">
<span ng-repeat="elem in list">{{ elem.xxx }}</span>
</div>
In controller just add objects in your $scope.list after some action
$scope.addToList = function() {
$scope.list.push({...});
}
And angular add them to DOM inside your div tag.
If you use not angular event model for refresh DOM use $scope.$apply().
Do not mix jQuery to Angular, you really not need to
Do all the DOM manipulation in directives!
Now to your question, if you really want to it your way
You wanted this $scope.style_Text = {color:'#F00'}; to be a string I guess, so $scope.style_Text = '{color:\'#F00\'};' and then var span = "<span ng-style=" + $scope.style_Text + " id='c"+i+"'>"+$scope.paragraph[i]+"</span>";
But really please do a directive
Edit: in such a case like this, what is the point of using ng-style and not style itself?
There is a HTML content which users can freely edit. Thats OK, but I have to move all IFRAME into a DIV. Im trying with this:
$('#rolunk_content iframe').html ('<div>1' + $('#rolunk_content iframe').html() + '2</div>');
but that has no effect.
EDIT: a fiddle: http://jsfiddle.net/nE3jG/
That's because your code is trying to set the innerHTML of an iframe, which obviously won't work... And the rest of your logic is wrong too...
Try:
$("#rolunk_content iframe").each(function() {
var div = document.createElement('div'),
rel = this.nextSibling, par = this.parentNode;
div.appendChild(document.createTextNode("1"));
div.appendChild(this); // the iframe
div.appendChild(document.createTextNode("2"));
par.insertBefore(div,rel);
});
Vanilla JS may be lengthier to write, but it is more reliable in terms of doing what you expect it to do ;)
If you just want to move IFRAME into a DIV, you can use jQuery .append() API .
$("#newdiv").append($("#rolunk_content iframe"));
Your code could go like this:
<div id="rolunk_content">
<p><iframe src="...." width="200" height="200"></iframe></p>
</div>
<input id="d" type="button">
<hr>
<div id="newdiv">Your IFRAME will be moved here.</div>
And JavaScript:
$('#d').click(function() {
$("#newdiv").append($("#rolunk_content iframe"));
});
The Fiddle is here:
http://jsfiddle.net/2HrA4/
And the document of jQuery .append() is here:
https://api.jquery.com/append/