I have the following script and I want to replace barbel with a href
$(".text_div, p").text(function() {
return $(this).text().replace("barbel", 'mpara');
});
$(".text_div").text(function() {
return $(this).text().replace("some", "red");
});
You have a few issues here:
Use html(), not text(), to insert HTML in to the DOM.
Be careful with your quotes as you're causing a syntax error by mis-matching them.
Use the second argument of the handler function to receive the current HTML value of the element instead of creating another jQuery object by accessing the DOM again.
With all that said, try this:
$(".text_div, p").html(function(i, html) {
return html.replace('barbel', 'mpara');
});
Try this:
console.log('Before:');
console.log($('.content').html());
$(".text_div ,p").each((index, elem) => {
let newHtml = $(elem).html().replace('barbel', 'mpara');
$(elem).html(newHtml);
});
$(".text_div").each((index, elem) => {
let newHtml = $(elem).html().replace('some', "red");
$(elem).html(newHtml);
});
console.log('\n\nAfter:');
console.log($('.content').html());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div class="content">
<div class="text_div">This is barbel</div>
<p class="tag_p">That is barbel again</p>
<div class="text_div">Some some</div>
</div>
Related
need to write id of each element on page - if the element has id
in plain javascript or jquery - doesn't matter
here is my try - without success
pls help
$('body *').each(function(el){
if(el.attr('id')){console.log(el.attr('id'));}
});
another try
document.querySelectorAll('*').forEach(function(el) {
if(el.attr('id')){console.log(el.attr('id'));}
});
Try this:
const elements = document.querySelectorAll('*')
const elementsWithId = Array.from(elements).filter(element => element.id != '')
elementsWithId.forEach(element => console.log(element.id))
<body>
<div id="test">
<p>No id</p>
<p id="creative">Has id</p>
</div>
</body>
This issue with your code is the el.attr('id'). Replace it with el.id
Can you please try this
document.querySelectorAll('*').forEach(function(el) {
if(el.attributes.id){console.log(el.attributes.id);}
});
I want to a <h1></h1> element in a div element in HTML with jQuery. How do I do this?
function show() {
let text = "greetings"
let divElem = document.getElementById("hello");
divElem.innerHTML = '<h1>${text}</h1>'
}
<div id="hello"></div>
<button onclick="show()">show</button>
Basically, I want to make an h1 element in the div element which displays the string contained in the text variable, "greetings" how do I do this?
Do you need to ` instead of ' ?!
Also can read about it in this link : Template literals (Template strings).
function show() {
let text = "greetings"
let divElem = document.getElementById("hello");
divElem.innerHTML = `<h1>${text}</h1>`
}
<div id="hello"></div>
<button onclick="show()">show</button>
You can use the Jquery .html() method.
Also, you have to use backticks instead of quotes. (`) in order to use templating inside a "string". This is called Template literals. You can read more about them here
function show() {
let text = "greetings"
$( "#hello" ).html( `<h1>${text}</h1>` );
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="hello"></div>
<button onclick="show()">show</button>
I have a HTML paragraph, if it is empty I want to show alert using jquery how.? I have tried the following:
var abc= $("#foo").text();
var abc= $("#foo").data();
var abc= $("#foo").val();
if (abc== '') { alert('working'); }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="foo"></p>
val() is used to retrieve the value of an input, not the text node value of an element. data() is used to retrieve data values for an element, not its text node value.
To check if the element does not contain anything, you should used text(). It's also worth noting that you may (or may not) need to use $.trim() to ignore whitespace, and to also check for child elements that do not have any text using children():
var $p = $('#foo'),
empty = ($.trim($p.text()) == '' && !$p.children().length);
console.log(empty);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="foo"></p>
Better still though, rather than rolling your own function for this, you can use jQuery's is() function, coupled with the :empty selector:
console.log( $('#foo').is(':empty') );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="foo"></p>
try this :
var abc = $("#foo").text()
if(!abc) {
alert('not working');
} else {
alert('working');
}
I'm trying to get the value from the HTML tag. Not the text itself, but the attribute value. What am I doing wrong?
$('label').click(function() {
$('p').text(($(this).val()));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label value="hello">click</label>
<p></p>
labels don't have values, input and other form elements can have values. So in your case it is jQuery's attr function, to receive attribute values. And there is no need of the additional brackets around this getter.
$('label').click(function() {
$('p').text($(this).attr("value"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label value="hello">click</label>
<p></p>
Use data-* it allows you to use any arbitrary string. ex. data-value="hello". This is valid and universal on on any element AFAIK. The jQuery method to use is .data()
$('label').click(function() {
$('p').text($(this).data('value'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label data-value="hello">click</label>
<p></p>
You may do like this in pure JS;
var lab = document.getElementsByTagName("label")[0],
pel = document.getElementsByTagName("p")[0];
lab.onclick = e => pel.textContent = e.currentTarget.getAttribute("value");
<label value="hello">click</label>
<p></p>
$('label').click(function() {
var value = $(this).attr('value');
});
Also, I don't think value is a valid attribute on a label element.
Without jQuery...
Array.from(document.querySelectorAll('label')).forEach((label) => {
label.addEventListener('click', () => {
let value = label.getAttribute('value');
});
});
<div id="content">
...
<p>NUMBER times...</p>
...
<p>Place N°: NUMBER</p>
</div>
How do I replace all NUMBER inside the content div?
I tried replace method but it didn't work.
Thanks.
You can use the standard Javascript replace function for strings.
oldhtml = $('div#content').html();
var newhtml = oldhtml.replace(/NUMBER/g, "123");
$('div.demo-container').html(newhtml);
You should iterate all your text nodes and replace the text inside them.
$('#content').children().each(function() {
var textNode = $(this);
textNode.text(textNode.text().replace("NUMBER", "NEW"));
});
This codes assumes all the children of #content just contain text.
Try this:
$('#content').children().each(function () {
$(this).html(function (i, html) {
return $(this).html().replace(/NUMBER/g, '123456');
});
});