Originally i had a remove function like this:
function ViewWorkflowDetail(btn, workflowId) {
$("#workflowDetailPanel").remove();
if (document.getElementById("workflowDetailPanel") == null) {
// Do something usefull here
}
}
Which worked brilliantly. Yet (in the spirit of using as much JQuery as possible) I changed it to:
function ViewWorkflowDetail(btn, workflowId) {
$("#workflowDetailPanel").remove();
if ($("#workflowDetailPanel") == null) {
// Do something usefull here
}
}
But right now $("#workflowDetailPanel") is never null anymore. If i change it back again (to document.getElementById), then there is no problem anymore. Why does the second option keeps on finding that div? Are the JQuery objects somehow maintained in some sort of cache?
Note: Exactly the same setup/data were used to test both cases.
It will never be null, since jQuery returns an empty array if the element does not exist, you must check the length of the array
if ($("#workflowDetailPanel").length > 0) {
// Do something usefull here
}
How can I select nodes that begin with a "x-" tag name, here is an hierarchy DOM tree example:
<div>
<x-tab>
<div></div>
<div>
<x-map></x-map>
</div>
</x-tab>
</div>
<x-footer></x-footer>
jQuery does not allow me to query $('x-*'), is there any way that I could achieve this?
The below is just working fine. Though I am not sure about performance as I am using regex.
$('body *').filter(function(){
return /^x-/i.test(this.nodeName);
}).each(function(){
console.log(this.nodeName);
});
Working fiddle
PS: In above sample, I am considering body tag as parent element.
UPDATE :
After checking Mohamed Meligy's post, It seems regex is faster than string manipulation in this condition. and It could become more faster (or same) if we use find. Something like this:
$('body').find('*').filter(function(){
return /^x-/i.test(this.nodeName);
}).each(function(){
console.log(this.nodeName);
});
jsperf test
UPDATE 2:
If you want to search in document then you can do the below which is fastest:
$(Array.prototype.slice.call(document.all)).filter(function () {
return /^x-/i.test(this.nodeName);
}).each(function(){
console.log(this.nodeName);
});
jsperf test
There is no native way to do this, it has worst performance, so, just do it yourself.
Example:
var results = $("div").find("*").filter(function(){
return /^x\-/i.test(this.nodeName);
});
Full example:
http://jsfiddle.net/6b8YY/3/
Notes: (Updated, see comments)
If you are wondering why I use this way for checking tag name, see:
JavaScript: case-insensitive search
and see comments as well.
Also, if you are wondering about the find method instead of adding to selector, since selectors are matched from right not from left, it may be better to separate the selector. I could also do this:
$("*", $("div")). Preferably though instead of just div add an ID or something to it so that parent match is quick.
In the comments you'll find a proof that it's not faster. This applies to very simple documents though I believe, where the cost of creating a jQuery object is higher than the cost of searching all DOM elements. In realistic page sizes though this will not be the case.
Update:
I also really like Teifi's answer. You can do it in one place and then reuse it everywhere. For example, let me mix my way with his:
// In some shared libraries location:
$.extend($.expr[':'], {
x : function(e) {
return /^x\-/i.test(this.nodeName);
}
});
// Then you can use it like:
$(function(){
// One way
var results = $("div").find(":x");
// But even nicer, you can mix with other selectors
// Say you want to get <a> tags directly inside x-* tags inside <section>
var anchors = $("section :x > a");
// Another example to show the power, say using a class name with it:
var highlightedResults = $(":x.highlight");
// Note I made the CSS class right most to be matched first for speed
});
It's the same performance hit, but more convenient API.
It might not be efficient, but consider it as a last option if you do not get any answer.
Try adding a custom attribute to these tags. What i mean is when you add a tag for eg. <x-tag>, add a custom attribute with it and assign it the same value as the tag, so the html looks like <x-tag CustAttr="x-tag">.
Now to get tags starting with x-, you can use the following jQuery code:
$("[CustAttr^=x-]")
and you will get all the tags that start with x-
custom jquery selector
jQuery(function($) {
$.extend($.expr[':'], {
X : function(e) {
return /^x-/i.test(e.tagName);
}
});
});
than, use $(":X") or $("*:X") to select your nodes.
Although this does not answer the question directly it could provide a solution, by "defining" the tags in the selector you can get all of that type?
$('x-tab, x-map, x-footer')
Workaround: if you want this thing more than once, it might be a lot more efficient to add a class based on the tag - which you only do once at the beginning, and then you filter for the tag the trivial way.
What I mean is,
function addTagMarks() {
// call when the document is ready, or when you have new tags
var prefix = "tag--"; // choose a prefix that avoids collision
var newbies = $("*").not("[class^='"+prefix+"']"); // skip what's done already
newbies.each(function() {
var tagName = $(this).prop("tagName").toLowerCase();
$(this).addClass(prefix + tagName);
});
}
After this, you can do a $("[class^='tag--x-']") or the same thing with querySelectorAll and it will be reasonably fast.
See if this works!
function getXNodes() {
var regex = /x-/, i = 0, totalnodes = [];
while (i !== document.all.length) {
if (regex.test(document.all[i].nodeName)) {
totalnodes.push(document.all[i]);
}
i++;
}
return totalnodes;
}
Demo Fiddle
var i=0;
for(i=0; i< document.all.length; i++){
if(document.all[i].nodeName.toLowerCase().indexOf('x-') !== -1){
$(document.all[i].nodeName.toLowerCase()).addClass('test');
}
}
Try this
var test = $('[x-]');
if(test)
alert('eureka!');
Basically jQuery selector works like CSS selector.
Read jQuery selector API here.
Javascript woes today... I'm struggleing to get a selector right.
I need to select elements, that don't have jqmData(bound) === true in a jQuery chained statement. This is what I have:
var swipesOnPage = $('div.photoswipeable');
...
swipesOnPage.not(':jqmData(bound="true")')
.jqmData('bound', true )
.each( function(){
// do stuff
});
I need to flag lables that received their "treatment" so I'm not re-running code on them. However I cannot get the selector right, so all elements, which I have set jqmData("bound",true) get re-selected every time.
Question:
How to use the not or filter statement correctly with data-attribute?
Thanks!
var $someCollection = $('div.photoswipeable').filter(function() {
return $(this).jqmData("bound") !== true;
});
edit
added a test with regexpr to solve the problem techfoobar pointed out
edit 2
corrected code for others hf :)
I'm looking for a way to get all static styles from a specified class. I don't want to append a new div and extract all possible values from it because values are often just computed...
Here are some related posts:
jQuery CSS plugin that returns computed style of element to pseudo clone that element?
Can jQuery get all CSS styles associated with an element?
http://quirksmode.org/dom/w3c_css.html
This is what i came up so far:
function getExternalCSS(className) {
var cssText = false;
$.each(document.styleSheets, function(key, value) {
$.each(value.cssRules, function(k, v) {
if(new RegExp(className, "i").test(v.selectorText)) {
cssText = v.cssText;
return false;
}
});
if(cssText !== false) {
return false;
}
});
return cssText;
}
css to browse:
.someClass {
style1...
}
.someOtherClass {
style2...
}
.myClassToFind {
style3...
}
usage:
getExternalCSS(".myClassToFind"); //note the . for class
The selectorText is returned correctly, but the if is never triggered. I already tried to parse to string etc. Any ideas?
Update
Check this demo: http://jsfiddle.net/XaB3T/1/
There were a couple of problems:
a) You need to return false from a $.each to stop the looping, its like break. This was not being done.
b) You were checking v.selectorText.toLowerCase() with '.myClass' which surely cannot match since '.myClass' is not all small case
Explanation for For counting in only those styles that will be applied at the end, you might need to do a lot more!
For CSS specificity rules, please refer to:
http://www.htmldog.com/guides/cssadvanced/specificity/
http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
http://reference.sitepoint.com/css/specificity
http://css-tricks.com/specifics-on-css-specificity/
The if never returns true because:
a) The selector text need not be exactly .yourClass. It can be .a .yourClass, div.yourClass or even .anotherClass, .yourClass etc.. all pointing to your element
b) The check needs to be something like:
for each selectorText {
strip off any { character
split the selector text by ',' into an array called parts
for each part {
check if it ends with '.yourClass' // if it does, this class is match
}
}
Another problem is CSS specificity. For counting in only those styles that will be applied at the end, you might need to do a lot more!
I'm trying to use jQuery to replace all occurrences of a particular string that occurs in a certain class. There are multiple classes of this type on the page.
So far I have the following code:
var el = $('div.myclass');
if(el != null && el.html() != null )
{
el.html(el.html().replace(/this/ig, "that"));
}
This doesn't work if there is more than one div with class myclass. If there is more than one div then the second div is replaced with the contents of the first! It is as if jQuery performs the replacement on the first div and then replaces all classes of myclass with the result.
Anyone know how I should be doing this? I'm thinking some kind of loop over all instances of mychass divs - but my JS is a bit weak.
I think what you are looking for is something like this:
$('div.myclass').each(function(){
var content = $(this).html();
content = content.replace(/this/ig,'that');
$(this).html(content);
});
(not tested)
slightly different of previous answer:
$('div.myclass').each(function(i, el) {
if($(el).html() != "" ) {
$(el).html($(el).html().replace(/this/ig, "that"));
}
});
should work
If the contents of your .myclass elements are purely textual, you can get away with this. But if they contain other elements your regex processing might change attribute values by mistake. Don't process HTML with regex.
Also by writing to the innerHTML/html(), you would lose any non-serialisable data in any child element, such as form field values, event handlers and other JS references.
function isTextNode(){
return this.nodeType===3; // Node.TEXT_NODE
}
$('div.myclass, div.myclass *').each(function () {
$(this).contents().filter(isTextNode).each(function() {
this.data= this.data.replace(/this/g, 'that');
});
});