I need to create a css stylesheet for an existhng html page. Is there any easy way to extract all the classes and ids using a script... I am familiar with python, java, c, javascript and php. Is there any library for those languages? re sems a bit overkill for me. grateful for any help.
cheers!
The easiest way to retrieve the ids of each of the elements is to simply iterate over the elements that have an id, and retrieve that:
var idEls = document.querySelectorAll('*[id]'),
ids = [];
for (var i=0, len=idEls.length; i<len; i++){
ids.push(idEls[i].id);
}
One way to cover those browsers that don't implement querySelectorAll() is to create a nodeList of every element, then iterate over that (quite probably very large) nodeList, test for the id and, if it exists, push that into the array:
var els = document.getElementsByTagName('*'),
ids = [];
for (var i=0, len=els.length; i<len; i++){
if (els[i].id){
ids.push(els[i].id);
}
}
Using jquery, loop through the elements and get id and class
$('html *').each(function(){
console.log($(this).attr('id'), $(this).attr('class'))
})
Related
I just wonder about Meteor.methods result stub. When i used Meteor.call, i tried handle result set but when result set out of range from Meteor.call area that return undefined. So I think if i use Session it can be solve. but sometime that way isn't work. So, if you guys, have you know best way to controll that topic, let me know your solutions!!
Thank you for comment, but I can't split up my logic. Because i want take javaScript library module from our old project-code. It had handle front-end of jQuery by html context for iframe. FirstTime, i tried figured out by use just iframe tag. but it had made issue for cross-domain. So i tried found solution about cross-domain on Meteor, but anywhere no solution. Therefore, i thinking how to solve it that issue and then i decided used Meteor.http! That was successed tool html.content from server-side and inside block of the callback function from client-side. but i can't hand over result out of callback function. i should give result of methods(iframe html content) to our old javascript-code... that's why i try that way! Any idea about this? i include javascript-code, it will help understanding.
...
drawSvg2: function(){
var objIFrame = $("#iFrame_"+m.canvasIdx()).contents();
var objList = objIFrame.find('.page');
var len = objList.length;
for (i=0; i<len; i++){
var obj = objList[i];
var children = obj.children; //childNodes;
var num = 0;
for (var k = 0; k < children.length; k++) {
var children2 = children[k].children;
for (var j = 0; j < children2.length; j++) {
if(children2[j].children[0].nodeName == "P"){
m.textArray(num, new Object());
c.canvasFetch(children[k], children2[j], "", m.textArray()[num], num);
}else{
m.textArray(num, new Object());
c.canvasFetch(children[k], children2[j], children2[j].children[0], m.textArray()[num], num);
}
num++;
}
}
}
v.drawSvg3();
},
...
That is huge function and handled front-end by jQuery, So i can't put inside Meteor.methods..
The way to use Meteor.call:
Meteor.call('methodName', param1Value, param2Value,..., function (error, result) { ... } );
The last parameter is a callback. Meteor invokes this callback function when the result is ready. Inside the body of the callback function, you can do whatever you want with the result. Why do you need to return this result to the calling function? Can you split up the logic so that it invoke Meteor.call, and handle the rest inside the callback?
Why doesn't this work?
var spans = $();
var elem = document.getElementById('someId');
spans.add(elem);
What is the proper way to start off with an empty collection and add elements to it?
I want to loop through a collection of ids and find the element on the page and add it to the matched set.
Quoting from the jQuery website:
Given a jQuery object that represents a set of DOM elements, the .add() method constructs a new jQuery object from the union of those elements and the ones passed into the method.
Hence, when you do .add() it will not save the added elements, you would have to explicitly assign the element to the newly created object i.e
var $elements = $('.elements');
$elements = $elements.add($('#anotherelement'));
The .add() method returns a new jQuery object, so you'd need to overwrite the old one:
spans = spans.add( elem );
...or since you're adding DOM elements, you can modify the existing jQuery object with .push().
spans.push( elem );
EDIT: Changed .pushStack() to .push(), though I don't know if .push() is officially supported.
You could use .pushStack() to add a collection though.
spans = spans.pushStack( [elem] );
or
spans = spans.pushStack( document.getElementsByTagName('div') );
I guess I don't get what you're asking. If you have an element and you want to add it to a collection, you just use the .add() method just like you've already shown. What confuses some is that this returns a new jQuery object so you would do it like this:
var spans = $();
var elem = document.getElementById('someId');
spans = spans.add(elem);
Of course, something like this would be shorter:
var spans = $();
spans = spans.add('#someId');
And, of course, you don't have to start with an empty object. You would just start with:
var spans = $('#someId');
If you're looking to push or add items selected from a jQuery object, you could also do this:
var $els = $(),
$someEls = $(".some-els");
$els.push.apply($els, $someEls);
Just another way to do it.
What you actually want to do is use jQuery to it's full potential. You can use selectors to grab and create the collection right away. Your three lines above becomes one line:
var spans = $('#someId');
to add more ids to the collection, you can separate them with commas:
var spans = $('#someId1, #someid2, #someid3');
There may be better ways to do what you're trying, but if you just want to create an empty jQuery object, use this:
var $foo = $([]);
Edit: I should clarify - your code actually should work, unless you're using an older version of jQuery, in which case $() would create a collection containing the document object. In newer versions, however, there's nothing wrong with that. The code snippet I pasted above is just something that should work in older versions and newer versions of jQuery.
Edit 2: In response to this portion of the question: "I want to loop through a collection of ids and find the element on the page and add it to the matched set", the following code might be useful:
var ids = ['foo', 'bar', 'baz'],
selector = $.map(ids, function(i, id) {
return '#' + id;
}).join(','),
$collection = $(selector);
While this doesn't directly answer the question of "how to append to an existing jQuery selection", I have a work-around for this particular use-case.
You can pass an array of DOM elements to jQuery, and it will create a jQuery selection out of them.
var spansArray = [];
var elem = document.getElementById('someId');
spansArray.push(elem);
var spans = $(spansArray);
I can't think of any reason why you would need to add each element to the jQuery selection one-at-a-time, as opposed to all-at-once, so this should be a "drop-in-replacement" for your use case. In theory, this must also prove more efficient, as jQuery's .add() is ultimately just calling .push() on some array behind the scenes.
Try
var spans = $("<span />");
var elem = $("#someId").html();
spans.append(elem).appendTo('#someAnotherId');
instead
The reason your code doesn't work is because add does not change the collection, it returns a new jQuery object with the new elements in it. If you wanted, you could instead say spans = spans.add(elem);, but what you're doing is unnecessary: the beauty of jQuery is that it makes this sort of imperative programming unnecessary. Look at helloandre's answer for a much easier way to accomplish your goal.
It's like the following, if this makes sense:
var x = [1, 2, 3];
x.concat(4);
console.log(x); // [1, 2, 3] -- concat does not mutate the original array
I'm totally new to Flex (moving away from Java for now :().
I have an XML file, I read the data and want to add it to a List and then use the List to be displayed.
Something like this is what I want to do:
List data = new ArrayList();
data.add(item1);
data.add(item2);
How can I do this, also how will I display the List in a table!!
Your question is rather... vague.
In Flex there are multiple ways to read data from XML and display it.
One approach would be using a HttpService to read the XML.
Then you can loop through the data manually or serve it as a DataProvider for a DataGrid.
I suggest you take a look at the Flex documentation, flexexamples.com and the flex quickstart. Topics that could help you:
http://www.adobe.com/devnet/flex/quickstart/httpservice/
http://www.adobe.com/devnet/flex/quickstart/using_data_providers/
http://blog.flexexamples.com/2007/07/26/displaying-xml-data-in-a-datagrid/
Nerver mind folks, I figured it out myself :)
var hostList : Array=[];
var i: int = numberOfHosts;
var hostNames: XMLList = hostPointXMLList.elements("HostName");
for (i=0; i< hostNames.length(); i++) {
//Alert.show("num="+i+" Hostname="+hostNames[i]);
hostList[i] = hostNames[i];
}
I'm doing a drag and drop operation on a tree using some help from Adobe's quick Starts:
http://www.adobe.com/devnet/flex/quickstart/working_with_tree/
The code suggested is roughly this:
var dropTarget:Tree = Tree(evt.currentTarget);
var i:int = dropTarget.calculateDropIndex(evt);
myTree.selectedIndex = i;
var node:XML = myTree.selectedItem as XML;
var drugXML:XML = XML(Tree(evt.dragInitiator).selectedItem);
if(node.localName() != drugXML.localName()){
DragManager.showFeedback(DragManager.NONE);
return;
}else{
DragManager.showFeedback(DragManager.COPY);
}
This is all well and good, but I don't like the way it is selecting(highlighting) each item in the tree I'm dropping on, it's less clear where the item is going to drop. I want to implement this without the selection but there doesn't seem to be a way to get the XML of the node using just the index. I would like something like this:
var dropTarget:Tree = Tree(evt.currentTarget);
var i:int = dropTarget.calculateDropIndex(evt);
var node:XML = myTree.itemAt(i) as XML;
//AFAIK itemAt(i) or anything like it does not exist
var drugXML:XML = XML(Tree(evt.dragInitiator).selectedItem);
if(node.localName() != drugXML.localName()){
DragManager.showFeedback(DragManager.NONE);
return;
}else{
DragManager.showFeedback(DragManager.COPY);
}
So does anyone know what function is, or what I can do to extend the tree to have a function, like "itemAt(i)"
Thanks
~Mike
EDIT: I forgot to post that my current workaround is setting the selectedIndex = -1 after I get my node:XML. I'm afraid that if something bogs on the processor the user may see it select then deselect.
Much simpler, though there may be gotchas:
var index:int = ...
var renderer:IListItemRenderer = tree.indexToItemRenderer(index);
var item:Object = renderer.data;
This won't work if the index is offscreen (since there might not be an active itemRenderer); shouldn't be an issue for drag and drop.
If your dataProvider is explicitly or implicitly a collection (see the linked docs for conversion rules), you should be able to use getItemAt to resolve the index.
It appears that an XML provider will be converted implicitly:
var tree:Tree = ...;
var data:XML = ...;
tree.dataProvider = data; // could just as well be from MXML
var provider:ICollectionView = tree.collection; // tree converted it for us
trace(provider.getItemAt(index));
If you have something other than the convertible types (XML, Array, etc.), you might consider wrapping your dataProvider in an XMLListCollection or what have you to gain access to that method.
The above is aiming in the right direction but missing.
Turns out you don't want the dataProvider since Tree overrides that; you want the collection property (protected). So you could override Tree and provide an indexToItem method to go with the thisToThat methods already present in Tree.
I have overcome a problem, but my solution seems really inefficient and clunky. Please consider this problem:
I have an array collection with articles in.
This array collection is filtered to a currently selected article category.
There is a cursor bound to a view that shows the current article.
When a category is deleted I need to delete orphened articles, I can't use the cursor or collection without affecting the views as they are bound.
I can itterate over the source, but if I delete (splice) from the source I have to break and start again, as all the articles indexes change, even when using for each.
This seems like a really inefficient way of doing things, and I'm sure there is a better way to do it, eithe by using another itterator on the same source, or unbinding the views unill I have finished updating, etc
Please let me know if I am missing a trick as I'm sure this is a really common problem/issue.
Thanks
Rob
p.s. Wrote this on my iPhone. Sorry for any mistakes!
Run the loop backwards.
So, instead of, say:
var len:int = arr.length;
for(var i:int = 0; i < len; i++) {
if(some condition) {
arr.splice(i,1);
}
}
do this:
for(var i:int = arr.length - 1; i >= 0; i--) {
if(some condition) {
arr.splice(i,1);
}
}
Simplest solution would probably be to just save the indexes you need to remove in a temporary array. Then after you've iterated through the collection, go back and just remove the items in the temporary array.
But from what I can gather, you should probably use a hash (Object) or something instead of an array structure.