I'm trying to write a javascript/jquery function that looks inside a div with a specific ID and removes a specific class from any child div(s) with a specific class.
E.g. the function should remove the class removeme from any divs inside div id="foo":
<div id="foo" onClick="openGame('foo')">
<div class="bar removeme"></div>
</div>
My attempt at writing this function:
function openGame(divid) {
var container = document.getElementById(divid);
var responses = container.getElementsByClassName("bar");
while (responses[0]) {
responses[0].removeClass('removeme');
};
}
Please note I'm a super beginner in JS and not super familiar with while loops :/
If you want to use jQuery to achieve this.
$(document).ready(function() {
$('div#foo').click(function() {
$(this).find('.removeme').removeClass('removeme');
});
});
This creates a click event on your element with the id "foo" that will find every elements inside of it and remove the class "removeme" from it.
I would use JQuery for this job:
$("#foo").find("div").removeClass("removeme");
This will find all children of #foo and remove the class .removeme.
Related
In my use case, I need to build some piece of HTML dynamically using jquery.
I start with this function:
function createSection(divName) {
$("#"+ divName).append("<section id='team' class='pb-5'>\
<div class='container'>");
}
Then I proceed with this function:
function createRow(divName) {
$("#"+ divName).append("<div class='row'>");
}
Then I add some other elements before I want to close the row en the section like this:
function closeRow(divName) {
$("#"+ divName).append("</div>");
}
function closeSection(divName) {
$("#"+ divName).append("</div></section>");
}
However, Jquery seems to add the closing tags itself. Which messes up my code.
I get this html:
<section id="team" class="pb-5">
<div class="container">
</div> </section>
After my first function createSection is executed.
How can I avoid this?
Elements don't have tags. They are whole objects in their own right.
Tags are used to create elements in HTML.
jQuery allows you to use HTML syntax to create elements, but this is just an abstraction. jQuery does not keep a string of HTML in memory and allow you to modify it. It is dealing with whole elements.
If you want to work with a string of HTML, then you need to deal with a string and not jQuery.
It's better to work with elements though. Create the div with $() and not append(). Add children to it. Append it to the parent element.
function createRow(divName) {
var row = $("<div />");
row.addClass("row");
$("#"+ divName).append(div);
return row;
}
I have added Elements using Jquery inside PHP after loading them from the database. Each button has two classes, one controlling the GUI and another controlling the Click for particular button. The code is as under
echo "<script type='text/javascript'>$('.main').append('<button class=b_ui b$index>Change</button>'); </script>";
Now if I check the classes from Inspect Element perspective of the browser, it shows 2 classes. But when I click on it and get class of element using this code
$('.b_ui').click(function()
{
cls = $(this).attr('class');
alert('no. '+cls);
}
It shows only first class (GUI) and not the other which I want to use for handling click.
Any help ?
Put quotes around the class attribute. <button class=\"b_ui b$index\">Change</button>
You should use "on" method:
$(document).on('click', '.b_ui', function() {
cls = $(this).attr('class');
alert('no. '+cls);
});
When adding elements dynamically to the DOM, they are not accessible by jQuery like an element which was there at page load. say you have this div:
<div id="div"></div>
and you add some content with jQuery so it now looks like this:
<div id="div"><span id="span"></span></div>
you cannot refer directly to the span using jQuery with $('span[id=span]'), you have to target a containing element then filter which contained element you want:
$('#id').on('click','span',function(){});
I'm using this to remove the div whenever I call my showresult(); function. I am dynamically creating this div <div class="sampageswrapper">, so this needs to be removed when ever showresult() is called.
function showresult(data) {
jQuery('.sampageswrapper div').remove();
// rest of my code.
}
But unfortunately this div is not removing.
<div class="sampageswrapper">
<div id="image_div" class="img_class" name="image_div">
..........
</div>
</div>
you can use the .samepageswrapper selector only
jQuery('.sampageswrapper').remove();
it should target that specific div.
when you use .sampageswrapper div as your selector, this targets all the div's inside the div element with sampageswrapper class
I am working with the google maps drawing manager. They don't put id's or class names on the drawing tools button bar so I'm trying to do this myself.
First I want to remove the circle button which the below works fine, but I want to add my own button so need to add a class name to the parent div "gmnoprint" but google has about 5 div's all with the same class name. I just want to add it to the one where the circle button was found.
<div class=gmnoprint"></div>
<div class=gmnoprint"></div>
<div class=gmnoprint"></div>
<div class=gmnoprint">
<div>
<div> <== This is what I found in my search
<span>
<div>
<img></img>
</div>
</span>
</div>
</div>
</div>
I am able to find the element I want and remove it, but adding a class to its wrapper div is proving a bit difficult for me.
This works for removing the button
$(".gmnoprint").each(function(){
$(this).find("[title='Draw a circle']").remove();
});
This doesn't work.. Just add's the class to all ".gmnoprint" div's
$(".gmnoprint").each(function(){
$(this).find("[title='Draw a circle']").remove().parent().addClass("test");
});
remove() removes the element from the DOM and returns the free-standing jquery object which has no connection to the DOM at all. A call to parent() after calling remove() is incorrect and that likely is the cause for your issue.
Try splitting your statements to:
var toRemove = $(this).find("[title='Draw a circle']");
toRemove.parent().addClass("test");
toRemove.remove();
You can use jQuery insertAfter and out your button after that default button then remove it.
$(".gmnoprint").each(function(){
var defBtn = $(this).find("[title='Draw a circle']");
$('<button class="my-button" />').insertAfter(defBtn);
defBtn.remove();
});
Or use jQuery after like this:
$(".gmnoprint").each(function(){
$(this)
.find("[title='Draw a circle']")
.after($('<button class="my-button" />'))
.remove();
});
You can use child selector to target the elements
$(".gmnoprint > div > div").addClass('myClassName');
At that point you could replace the html of the whole div , or find the span and replace it's inner html. Using html() method you don't need to use remove() as it will replace all contents of the element(s)
$(".gmnoprint > div > div").addClass('myClassName').find('span').html('<newButton>');
API Reference : http://api.jquery.com/child-selector/
I am trying to add a class to a newly appended DIV without using something like:
t.y.append('<div class="lol'+i+'"></div>');
Here's a better example of what I'm trying to do:
var t = this;
$(this.x).each(function(i, obj) {
//append new div and add class too <div></div>
t.y.append('<div></div>').addClass('lol'+i);
});
Page load HTML looks like:
<div class=".slideButton0 .slideButton1 .slideButton2" id="sliderNav">
<div></div>
<div></div>
<div></div>
</div>
When you append an element through .append, it doesn't change the context of the jQuery object.
You could write it like this:
$('<div></div>').appendTo(t.y).addClass('lol'+i);
or
$('<div></div>').addClass('lol'+i).appendTo(t.y);
(these both do the same thing, simply in different orders, the second possibly being more clear)
the context of the jQuery object will be the newly created div.
t.y.append('<div></div>').addClass('lol'+i);
should be
t.y.append('<div></div>').find('div').addClass('lol'+i);
In the first case you are adding class to the div to which you are appending ..
SO the context is still the parent div and not the newly appended div..
You need to find it first inside the parent and then add the class..
EDIT
If you want to just add the class to the last appended element ... Find the last div in the parent and then add the class to it..
This will make sure you are not adding the class to all the div's every single time you iterate in the loop..
t.y.append('<div></div>').find('div:last').addClass('lol'+i);
Try this:
t.y.append($('<div></div>').addClass('lol'+i));
Fiddle: http://jsfiddle.net/gromer/QkTdq/
var t = this;
$(this.x).each(function(i, obj) {
//append new div and add class too <div></div>
var d = $('<div />').addClass('lol' + i);
t.y.append(d);
});
The problem is that append returns the container instead of the thing you just appended to it. I would just do the addClass before the append instead of after:
var t = this;
$(this.x).each(function(i, obj) {
//append new div and add class too <div></div>
t.y.append($('<div></div>').addClass('lol'+i));
});
EDIT ... or, in other words, exactly what Gromer said. Beat me by five whole minutes, too. I'm getting slow.
You don't mention why you want to number the class attribute to your list items, but in the case that you are actually using them for css don't forget you have :odd and :even css selector attritbutes and also the equivalent odd/even jQuery selectors.
http://www.w3.org/Style/Examples/007/evenodd.en.html
http://api.jquery.com/odd-selector/
I didn't find anything like this. notice the class attribute!
$.each(obj, function (_index, item) {
resultContainer.append($('<li>', {
class: "list-group-item",
value: item.id,
text: item.permitHolderName || item.permitHolderId
}));
});