I've got links in one wrapper which have specific class. I know that i can change text with .text() in jQuery, but what if i have 2 or more texts in same class. How can I change them all at once ?
Change all to same new string.
$('.someClass').text('new text');
Loop over all in class and modify existing text for each element
$('.someClass').text(function(_, oldText){
return oldText + ' new text'
});
Hope, this will help to change multiple HTML elements with same class with jquery
$(function () {
$(".change-title").on("click", function (e) {
$('.change-text').text($(this).data("desc"));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="change-text">
Change Text 1
</div>
<p class="change-text">Change Text 1</p>
button1
button 2
Related
Is there a way to dynamically remove elements with javascript or jquery. Suppose I have a function createElements() which creates new element and another function removeElement() which is suppose to remove the corresponding element. You will notice that when you run the snippet that when you click on the remove button all the element is gone! How could I implement this code? Isn't there a jquery selector where i could simply use removeElement(this) or somenething like that? Any suggestions are most welcome :) thank you.
function createElements() {
const boom = document.getElementById('boom');
boom.insertAdjacentHTML(
'beforeend', '<div class="newElem"><p >new element created dynamically yay!</p><button onclick="removeElement()">remove</button></div>'
);
}
function removeElement() {
alert('element removed dynamically boOoOoOoOooo!')
$('.newElem').remove();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="boom">
</div>
<br>
<button onclick="createElements()">Create new element</button>
You can do it like this:
function createElements() {
const boom = document.getElementById('boom');
boom.insertAdjacentHTML(
'beforeend', '<div class="newElem"><p >new element created dynamically yay!</p><button onclick="removeElement(this)">remove</button></div>'
);
}
function removeElement(element) {
alert('element removed dynamically boOoOoOoOooo!')
$(element).parent(".newElem").remove();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="boom">
</div>
<br>
<button onclick="createElements()">Create new element</button>
You just need to follow one single API. Use either pure JavaScript or jQuery. I would also suggest you to use unobstructive approach. Also, the way you remove the elements is wrong. You are removing everything.
See this way:
$(function() {
$("button#add").click(function() {
$("#boom").after('<div class="newElem"><p >new element created dynamically yay!</p><button class="remove">remove</button></div>');
});
$(document).on("click", ".remove", function() {
alert('element removed dynamically boOoOoOoOooo!')
$(this).closest(".newElem").remove();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="boom">
</div>
<button id="add">Create new element</button>
To be able to always delete the div that encompasses the remove button, you have to traverse the DOM tree. There are lots of jQuery goodies for this: http://api.jquery.com/category/traversing/
In this particular case, I would do the following:
var elementCounter = 0;
function createElements() {
const boom = document.getElementById('boom');
boom.insertAdjacentHTML(
'beforeend', '<div class="newElem"><p >'+elementCounter+': new element created dynamically yay!</p><button onclick="removeElement(event)">remove</button></div>'
);
elementCounter++;
}
function removeElement(event) {
alert('element removed dynamically boOoOoOoOooo!')
$(event.target).closest('.newElem').remove();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="boom">
</div>
<br>
<button onclick="createElements()">Create new element</button>
So you pass on the click event to the function as a parameter, and then with event.target you find out which button was clicked. $(event.target).closest(".newElem") will get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.
I need to replace the text of many divs, where according to the text of each div, put a text or another.
Example: If the text is 0, replace it with "no quota" and if it is different from 0, put "Yes it has".
Html code:
<div><p id="text">1</p></div>
<div><p id="text">0</p></div>
<div><p id="text">1</p></div>
JS code:
$('#text').text(function(){
if($(this).text() == '0')
{
$(this).text('No quota');
}
else
{
$(this).text('"Yes it has');
}
});
But only changes the first element and the others left with the same text.
As I can change the text for each item? Greetings from Chile.
you have multiple instances of the same id. each id needs to be unique - which is why its only affecting the first item. Change the id to a class and you will be able to change each p to the new text. Also spotted a typo in the last else text (correctedin the code below).
<div><p class="text">1</p></div>
<div><p class="text">0</p></div>
<div><p class="text">1</p></div>
$('.text').each(function(){
if($(this).text() == '0')
{
$(this).text('No quota');
}
else
{
$(this).text('Yes it has');
}
});
ID is to be used as unique identification number hence only first item changed. Change ID to CLASS should solve the issue.
There are two problems.
First, as others have noted, you should be using a class instead of ID if you want to match multiple elements.
Second, when you give a function argument to .text(), it receives the old text as an argument, and should return the new text rather than calling .html() within it. So it should be:
$('.text').text(function(i, oldtext) {
return oldtext == '0' ? 'No quota' : 'Yes it has';
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div><p class="text">1</p></div>
<div><p class="text">0</p></div>
<div><p class="text">1</p></div>
I have a DIV of the following kind:
<div class='entry'>
<p class='entry-text'>собаки играют вместе <a title="Search private" class="app-context-link" href="/contexts/private">#private</a></p>
<p class='entry-date'>14172869383540000</p>
<p class='entry-menu'> <a class="app-link-menu" href="#">show filtered</a></p>
<div class='separator'> </div>
</div>
I have a code that takes out the contents of the DIV which looks like this below, but how do I change it so it takes out the text that's inside 'entry-text' class only?
$(".entry").on('dblclick', function(e) {
e.preventDefault();
// Get the statement into the edit box at the top
$("#statement").val(e.currentTarget.innerText);
}
Thanks!
This should do it :
$(".entry").on('dblclick', function(e) {
e.preventDefault();
// Get the statement into the edit box at the top
$("#statement").val($('.entry-text', e.currentTarget).text());
}
$('.entry-text', e.currentTarget) selects all elements with entry-text class within e.currentTarget element and then calls .text() on it.
Sources :
.text()
$(selector, context)
$(".entry").on('dblclick', function(e) {
e.preventDefault();
// Get the statement into the edit box at the top
$("#statement").html($('.entry-text', e.currentTarget).text());
}
.val() is for inputbox and forms
.html() is for selecting text
e.currentTarget is typically equals to this .So this also works.
$(".entry").on('dblclick', function(e) {
e.preventDefault();
// Get the statement into the edit box at the top
$("#statement").val($('.entry-text', this).text());
}
I need to add a hidden class in my JS if the span is empty, but if it isnt show the content.
HTML
<div id="uploadControls">
<br><span id="uploadsError" class="validErrors smarterr"></span>
</div>
JavaScript
$(document).ready(function () {
$('#uploadControls').find('span').each(function () {
if ($(this).is(':empty'))
$(this).addClass('.hidden');
});
A simple typo!
$(this).addClass('.hidden');
^
The class name string has a .. addClass is not a selector, just the name[s] to be added.
It should be
$(this).addClass('hidden');
and you can just do it with the selector, no each/find is needed.
$("#uploadControls span:empty").addClass("hidden");
I have 4 divs in a container. I want to display the html of the container which contains the divs in the textarea. I'm able to do this. The issue is, i don't want to get all the html of the container. I don't want to get #iv #three. I want to copy all the html of the container except div #three. I could use $('#three').remove() but i don't want to remove the div, I just don't want to copy it's html value to textarea. Check jsfiddle http://jsfiddle.net/rzfPP/
<div id="container">
<div id="one">test 1 </div>
<div id="two">test 2 </div>
<div id="three">test 3 </div>
<div id="four">test 4 </div>
</div>
<textarea id="save"></textarea>
var x = $('#container').html();
$('#save').val(x);
Try this
$("#container").clone().find("#three").remove().end().html();
http://jsfiddle.net/rzfPP/21/
/*
var x = $('#container').html();
$('#save').val(x);
*/
var lol = $('#container').clone()
$(lol).find('#three').remove();
$('#save').val(lol.html());
$('#container').clone().find('#three').remove().end().html();
Technically this is illegal since you are duplicating IDs, but it works fine.
http://jsfiddle.net/rzfPP/33/
Edit: Someone beat me to it :( Oh well.
var text = "";
$('#container div').each( function() {
if ( this.id != "three" ) {
text += $(this).html();
}
});
$('#save').val( text );
http://jsfiddle.net/rzfPP/31/
Basically you check the divs inside #container one by one, and check their id. If it's one you want, add their html to a string. Then at the end give that string as your textarea value.