Selector for first level div elements of any website
Hi there,
currently I'm trying to implement a Chrome Extension which shall enable me to navigate through any webpage by using the left (previous element) and right (next element) arrow key. Its for my kodi couch potato machine.
My first attempt was quite simple by adding tabindexes for each anchor-Element. The current element has a red box arround it, so you can see your current selection. Well it works, but its not really usefull if there are hundreds of links an the one you want to navigate to is for instance link 199 :)
So I thought on another approach by navigating into the depth of the site, so you first will navigate through the first level divs, you select a div and then you can navigate on the next level elements or you jump back to the parent level.
Thats the idea so far, but right at the beginning I have the problem to select div elements that are in the first level of the page.
I checked the selector page ( http://api.jquery.com/category/selectors/ ), but it seems even those huge amount of selectors can’t match my needs, especially because it is not made for a certain page, where I could easily select the parts my well known structure.
Some code to make it clearer
currently I'm trying to implement a Chrome Extension which shall enable me to navigate through any webpage by using the left (previous element) and right (next element) arrow key. Its for my kodi couch potato machine.
My first attempt was quite simple by adding tabindexes for each anchor-Element. The current element has a red box arround it, so you can see your current selection. Well it works, but its not really usefull if there are hundreds of links an the one you want to navigate to is for instance link 199 :)
So I thought on another approach by navigating into the depth of the site, so you first will navigate through the first level divs, you select a div and then you can navigate on the next level elements or you jump back to the parent level.
Thats the idea so far, but right at the beginning I have the problem to select div elements that are in the first level of the page.
I checked the selector page ( http://api.jquery.com/category/selectors/ ), but it seems even those huge amount of selectors can’t match my needs, especially because it is not made for a certain page, where I could easily select the parts my well known structure.
Some code to make it clearer
- kodiTabindexInject='\
<script type="text/javascript">\
var iKodiTabindexCount = 0;\
$("*").each(function() {\
$(this).removeProp("tabindex");\
});\
$("div").each(function() {\
var kodiElementId = $(this).attr("id");\
if ( typeof kodiElementId !== typeof undefined ) {\
$(this).prop("tabindex", iKodiTabindexCount);\
iKodiTabindexCount++;\
}\
});\
</script>\
';
$( document ).ready(function() {
$("body").append(kodiTabindexInject);
});
As you can see first I remove all existing tabindexes with the aim to rebuild the tabindexes for my needs. Currently I just go through each div of the given page, which has an id set but I would like to reduce selector
- $("div")
so that its only returning first level divs.
Has anyone an idea how to manage this? I would be also be interested on other approaches to navigate with left, right enter and backspace through a webpage. Share your ideas with me :-)
Sorry for writing a book, but I thought it will make things clearer if you know my motivation and why I don't have influence on the structure of the website-code ;-)
Best wishes
Topic Participants
am.herrmann
jakecigar