How can I remove all elements found by a class name.
I want to do this using the dojo framework.
Try with this:
dojo.query(".class_name").forEach(dojo.destroy);
DEMO
Try the below code.
<div id="list">
<div class="odd">One</div>
<div class="even">Two</div>
<div class="odd">Three</div>
<div class="even">Four</div>
<div class="odd">Five</div>
<div class="even">Six</div>
</div>
dojo.query(".odd").forEach(function(node, index, nodelist){
// for each node in the array returned by dojo.query,
// execute the following code
dojo.remove(node);
});
Referred below links :
https://dojotoolkit.org/reference-guide/1.7/dojo/destroy.html
http://dojotoolkit.org/documentation/tutorials/1.6/using_query/
Thanks,
Siva
Related
How to get nested DOM.
I want to get the nested DOM by Jquery.
For example.
<div id="red">
<div id="member">A</div>
</div>
<div id="blue">
<div id="member">B</div>
</div>
<div id="yellow">
<div id="member">C</div>
</div>
Is it possible to get the each memver id like, yellow.member
I want to do like this.
$("#yellow.member").removeClass("myclass");
The way you wanted to access the child element of #yellow was real close to be correct.
$("#yellow .member").removeClass("myclass");
Notice the added space. The space means to look for another matching element in the descendant tree of the element matched by the previous selector.
Now it's your markup that is wrong. You just cannot use the same id more than once. The concept of id comes from long before the computer age... An "identification" is unique per definition!
Here is how your markup should look like... in a working example where the interval is just for fun:
$(document).ready(function(){
setInterval(function(){
$("#yellow .member").toggleClass("myclass");
},1000);
});
.myclass{
background-color:yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="red">
<div class="member">A</div>
</div>
<div id="blue">
<div class="member">B</div>
</div>
<div id="yellow">
<div class="member">C</div>
</div>
You can use nested selectors with jQuery:
$('#yellow #member').removeClass('myclass');
Removes .myclass from the #member element inside #yellow.
Also, your HTML isn't valid. You can use an ID only once per document, so change all <div id="member"> ... </div> to <div class="member"> ... </div>. Then the selector passed to jQuery changes to
$('#yellow .member')
What you're after is the .find() method.
$("#yellow").find('#member').removeClass("myclass");
Or children()
$("#yellow").children('#member').removeClass("myclass");
or
$('#yellow>#member'),removeClass("myClass");
EDIT: Also don't have duplicate id's. Use class attribute instead.
I have my object like so:
var text = document.getElementsByClassName('decode-text')[0];
It is a list of html elements that look like:
<div class="decode-text">
<div class="cycleText">
<div class="cycle-0">
<div class="text-animation">hey</div>
</div>
<div class="cycle-1">
<div class="text-animation">you</div>
</div>
<div class="cycle-2">
<div class="text-animation">guys</div>
</div>
</div>
</div>
I will just use indexof but want to understand why .contains returns false?
text.classList.contains('cycleText'); = false // why
Also any recommendations on getting the number of 'cycle-*' class names in this node list?
You can achieve this using css attribute selectors. The ^ means "starts with":
document.querySelectorAll('[class^="cycle-"]');
classList is a list of classes assigned to the current DOM element, and does not include the classes of its children.
The only entry of the list is decode-text.
This should be pretty simple but I can't make it work. I need the height of an item that is inside the last item with a class.
HTML like so:
<div class="tag" >
<div class="left"></div>
<div class="right"></div>
</div>
<div class="tag">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="tag">
<div class="left" id="I need this height !"></div>
<div class="right"></div>
</div>
<div class="footer"></div>
JavaScript poor attempt:
lastLeftHeight = $('.tag').last().$('.left').height();
I know that doesn't work. It's just to show what I'm trying to get .tag items can vary so I can't target a number or an ID.
try this ..
lastLeftHeight=$('.tag:last > .left').height();
you almost had it, but instead of using jquery methods, it can be accomplished with the proper query selector
$(.tag:last .left).height()
this will grab the last .tag element and find every child element with the class .left and return their heights
heres a fiddle demonstrating the selector in action:
http://jsfiddle.net/6e0s4jzj/
I would try some combination of using children(), filter(), and last() to get the height of a particular child div.
http://www.w3schools.com/jquery/jquery_traversing_filtering.asp
This explains a little more about traversing up and down the DOM using jQuery, and with examples that I would think would help.
I have following elements:
<div class="some-name-1"></div>
<div class="some-name-2"></div>
<div class="some-name-3"></div>
<div class="other-name-1"></div>
<div class="other-name-2"></div>
I need next elements:
<div class="some-name-1"></div>
<div class="some-name-2"></div>
<div class="some-name-3"></div>
I tested jQuery('class^="some-name-"'), but that does not work.
Thanks in advance.
You just need to enclose the class^="some-name-" in square brackets: ^ in Selector
$('[class^="some-name-"]')
I'm pretty sure that will work.
You need [] in that selector.
jQuery('div[class^="some-name-"]')
try that
How can I select the popupwindow of the popup-lightbox div?
in jQuery, it's be something like $('div#popup-lightbox #popupwindow'). Unfortunatly, in Prototype, it's not that easy... anyone can help me? thanks!
<div id="popup-lightbox" class="popup">
<div id="popupoverlay"></div>
<div id="popupdiv">
<div id="popupwindow"></div>
</div>
</div>
<div id="popup-modal" class="popup">
<div id="popupoverlay"></div>
<div id="modaldiv">
<div id="popupwindow">
<div id="modalint">Your changes have not been saved.</div>
</div>
</div>
</div>
Use the bling-bling http://api.prototypejs.org/language/dollardollar/
$$('#popup_lightbox #popup_window') (also, you are not using ids properly, like desau and fantactuka said)
First up, you're using ID attributes incorrectly. According to the W3C specification, ID attributes are supposed to be unique across the document.
That aside, the prototype selection syntax is slightly different from jQuery:
$("popup-lightbox").select("#popupwindow")[0];
Actually since id should be uniq at the page I'm not sure that it makes sense to use complex selector. Why not just $('popupwindow')?