Combe Multiple JS Selectors with jQuery Selector - javascript

I am selecting a group of table rows by using the following line of JS:
document.getElementById('tab1_content').contentDocument.documentElement.getElementsByClassName("data1_smaller")
These represent entries in a table of contents. I want to return only those above which also contain the word 'CHAPTER', so I was attempting to use the jQuery :contains() selector to accomplish this and attempted to convert the entire thing into a single jQuery selector; so, to begin with, I tried converting the following invalid line:
document.getElementById('tab1_content').contentDocument.documentElement.getElementsByClassName("data1_smaller").$(":contains('CHAPTER')")
to this:
$("#tab1_content > contentDocument > documentElement > .data1_smaller:contains('CHAPTER')")
The selector above doesn't give an error but it fails to find anything. Does anybody know the correct way to do this?

You can achieve what you want with pure vanilla js just like you tried in the beginning. You just need to do some small adjustments to your code. You can use querySelectorAll() to query all elements matching a selector inside your ID. Something like this should work just by looking at your example, but might need some small adjustments.
[...document.getElementById('tab1_content').querySelectorAll(".data1_smaller")].filter((node) => node.textContent.includes('CHAPTER'))
// Edit, saw in the comments that you're accessing content in an iframe
[...document.getElementById('tab1_content').contentWindow.document.querySelectorAll(".data1_smaller")].filter((node) => node.textContent.includes('CHAPTER'))

I found this solution based on Anurag Srivastava's comments:
$("#tab1_content").contents().find(".data1_smaller:contains('CHAPTER')")
The issue was that I was trying to select things that are inside of an iframe and the the .contentDocument.documentElement that I used to access the iframe in JS has to be changed to .contents() in jQuery in order for it to work.

Neither contentDocument or documentElement are valid HTML tags. Try to select by id or class name.

Related

Finding the number of options in multiple selects that have the same IDs

Firstly, I do know that it is against best practice for multiple elements to have the same ID in a single page. However in this case I need for there to be two selects with the same id.
I have seen some success using this method:
$('#undo_redo_to option').length;
$('#undo_redo_to:eq(0) option').length;
*$('#undo_redo_to:eq(1) option').length;*
However, the code enclosed in *'s does not give me the proper length.
Please see the following pen, where I have created my selects and did my debugging.
LINK TO CODE
Thanks!
The problem is that jQuery uses the native JS functions first, so when you do a $('#this_id') you are effectively calling document.getElementById('this_id'). it's not just against best practice, it actually won't work... you could loop through your selects and check the id:
$('select option').each(function(){
if($(this).closest('select').attr('id')=='my_id'){
//do something
}
});
Assuming you've inherited the HTML and cannot change the ids to classes:
Note that eq() is a jQuery selector. If you change it to nth-child(2), you'll be using a CSS selector. That gives you what you need:
$('#undo_redo_to:nth-child(2) option').length;
http://codepen.io/anon/pen/WwERGW?editors=1011
You can do it with native javascript, like this:
document.querySelectorAll("[id=undo_redo_to]")
You can do it with jquery like this:
$("[id=undo_redo_to]")
This is the property selector, as the #-type selector will stop searching when the first element having that id was found.
So you can do this using plain javascript or jquery, but don't do it, because id should be unique and if it is not unique, then the HTML is invalid and it is bad for SEO.

Getting information from nested div and class in HTML with javascript

I'm trying to get to the div class="article" nested inside a div called div id="tabs=main from this a HTML-page that looks like this:
pastebin
I have tried something like this but with no result:
var targetAbs = doc.querySelectorAll("article");
Anyone have any tips for me? Not even sure I'm suppose to use this queryselector. I have also tried the getElementsByClassName, but I think since it's nested I can reach it.
doc isn't a standard variable provided by the browser. You are looking for document.
Class selectors begin with a .. "article" is a type selector and will match <article> elements.
As your element has a class of article, you need to use the following code:
doc.querySelectorAll(".article");
You need to place a . in front of the selector when it is referring to a class.

Why is Inspecting the DOM element showing something diff than using jQuery ID selector in console?

I'm working on displaying a graphic on a website. For some reason, when I inspect the element I see this:
<div id="canvas-daily" style="position:relative;" ng-if="currentMode == 'day'" class="ng-scope"><div class="circle-background"></div></div>
But when I do document.getElementById("canvas-daily") in my console I get a svg graphic inside the parent (canvas-daily) ID div. Why would this be happening and how can I fix/hack into this to append the content that is obviously there?
Edit - this answer has been rendered obsolete by edits the OP made to their question. It has not been deleted yet because of the conversation happening in comments.
To find the DOM element shown in the HTML in your question, you would just use this:
document.getElementById("canvas-daily")
Do NOT include the # in the string you pass to document.getElementById(). That is only used with more generic functions that accept CSS selectors like document.querySelectorAll(). document.getElementById() just takes a plain string that matches the ID you are looking for.

Get a jQuery element for a DOMElement

I know how to do the opposite. Getting a certain DOMElement for a jQuery element is easy. (Use the get() method)
But how can you get a jQuery element for a specific DOMElement?
Unfortunately this DOMElement does not have any attributes like class or id so constructing a selector is not really an option.
Lets say I have this html:
<div class="edit">Abcd<b><i><u>asdasd</u>adasda</i></b>sdfsdf<br>asd</div>
I am in the u-DomElement. How can I get this as a jQuery element?
Is there a smart way to do this?
EDIT:
I wanted to know if there is a gerneral way to do this. Not specific to the code shown above.
Like:
DomElement.toJQuery()
Is there anything like that? I am aware that this might not be possible.
Getting a jQuery object for a DOM object is as simple as jQuery(dom_node) (or $(dom_node)). See http://api.jquery.com/jQuery/
This is commonly used in event handlers, which are given the DOM node as this, so that you will often see $(this)
If you want to get just the Element use the below code. if you wanted to get the HTML of any element you might want to add the .html() tag to either of the examples
var myVar = $('.edit u');
or
var myVar = $(".edit").find("u");
Are you looking for this?
$(".edit").find("u");
hope this is what you are looking for,
$(DomElement)
you want a only 1 specific dom element i suggest you find a way to add an id to that element.
but to get an u element inside a edit class:
$('.edit u');
$('.edit').find('u');

Replace part of innerHTML without reloading embedded videos

I have a div with id #test that contains lots of html, including some youtube-embeds etc.
Somewhere in this div there is this text: "[test]"
I need to replace that text with "(works!)".
The normal way of doing this would of course be:
document.getElementById("test").innerHTML = document.getElementById("test").replace("[test]","(works!)");
But the problem is that if i do that the youtube-embeds will reload, which is not acceptable.
Is there a way to do this?
You will have to target the specific elements rather than the parent block. Since the DOM is changing the videos are repainted to the DOM.
Maybe TextNode (textContent) will help you, MSDN documentation IE9, other browsers also should support it
Change your page so that
[test]
becomes
<span id="replace-me">[test]</span>
now use the following js to find and change it
document.getElementById('replace-me').text = '(works!)';
If you need to change more than one place, then use a class instead of an id and use document.getElementsByClassName and iterate over the returned elements and change them one by one.
Alternatively, you can use jQuery and do it even simpler like this:
$('#replace-me').text('(works!)');
Now for this single replacement using jQuery is probably overkill, but if you need to change multiple places (by class name), jQuery would definitely come in handy :)

Categories

Resources