DIV with two tags? - javascript

I know how to deal with more than one class in div but I never seen something like that:
<div data-reactroot>
</div>
It is not a class, not a ID it looks just like multiple tag. How am I supposed to select it with jQuery? I tried
$('div data-reactroot');
But it seems that I'm not even close to it.

Try to use has attribute selector at this contex,
$('div[data-reactroot]');
Since data-reactroot is an attribute of div element.

As written, it is an attribute and here is how to get it with plain javascript using the querySelector
var elem = document.querySelector('div[data-reactroot]');

Related

Changing value of span (Javascript) with Tampermonkey

I have a question regarding the modification of a value inside a class. I would like to change the value with Tampermonkey extension however I cant get it to work.
The initial code looks like this:
<div class="bzeTileValue bzeTileValueNegative">
<span class="bzeTileUnit">YYY</span>
<span>XXXX</span></div>
I would like to change the value of XXXX. Preferably before the site loads.
I tried already the document.getElementbyId("xxxxx").innerHTML=....; But couldn't get it to work unfortunately. Any help would be hugely appreciated.
Thanks a lot friends
The span containing XXXX is inside a div which has classes on it but no ID. This means that getElementById won't work. You can use Document.querySelector to get the div and then access the child nodes of that div. The span you are trying to access doesn't have any classes on it, but you can target it as the second child inside the div. Then you can change the value using innerHTML or innerText.
Altogether it looks like this:
document.querySelector('.bzeTileValue').children[1].innerHTML = 'New Value';

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.

How to get and change the text in a button?

I have a button with the class of
button.btn.btn-default.check-all
how do I find this button, get the text it says and change it with a find?
I tried something like this but not sure if it works
var r = $("button").find("check-all");
It appears that you have a button with multiple classes and you want to select the element based on all the classes. Simply use the following selector
$('button.btn.btn-default.check-all')
You can get the text by
$('button.btn.btn-default.check-all').text()
And can update by
$('button.btn.btn-default.check-all').text('your_updated_text');
You should do something like:
var element = $('button.btn.btn-default.check-all');
//save text in prevText
var prevText = element.text();
//now, change it!
element.text('text-changed');
Using class names to get an element might not be a good solution. My solution would be to use id attribute and use this id attribute to get the correct element.
See this fiddle
HTML
<button id="my-button" name="buttonName" onclick="change()">Hi</button>
and JS
alert(document.getElementById('my-button').innerHTML);
function change(){
document.getElementById('my-button').innerHTML='hello';
}
What I have done here is, used document.getElementById('my-button').innerHTML which gets the text of the button using document.getElementById(). The same thing can be used to set the text in a button.
This question lead to basic skills in jQuery. I truly recommande that you could find out jQuery Api documentation and read deeply into it. You can get a very good view of jQuery thus you can do much better and efficient in your work.
Here is the link that may help you with this question.
https://api.jquery.com/category/selectors/
https://api.jquery.com/category/attributes/
You can use the jQuery :contains() psuedo selector to create a variable that will pinpoint the button with the specified text. It can be any text, but be cautious if you have buttons with similar text because the return is not an exact match (to avoid this only input/search text that you know is unique to the button).
var r = $("button:contains('check-all')");
To change the text with the newly created variable you can use the jQuery .text() method.
r.text('check-none');
Fiddle Example
:contains() jQuery

jQuery selector custom attribute

I have elements in my page like
<div class="editableTxt" data-model-attr="name" data-model-id="123">some text</div>
Now how do I write a selector in jQuery based on the 2 custom attribute values.
So i want something like select element with data-model-attr="name" data-model-id="123"
I want to get a unique element. So I use the 2 attributes.
USe like this
$("[data-model-attr='name'][data-model-id='123']")
As you specified element and not div, have you simply tried:
$('[data-model-attr="name"][data-model-id="123"]');
JSFiddle: http://jsfiddle.net/TrueBlueAussie/x23BV/
for a div obviously just add div:
$('div[data-model-attr="name"][data-model-id="123"]');
Use:
$('div[data-model-attr="name"][data-model-id="123"]');
$('div[data-model-attr="name"][data-model-id="123"]')
But don't use it, it's very slow, set id or classes to this div.

jquery to find all the elements inside a div tag

How to find all the anchor tags inside a div tag and need to append one more property to the anchor tag. say target="_blank".
How can i do this in using jquery?
Do you mean all the anchors in any div element, or in some specific div element? If it's the former, this will do the trick:
$('div a').attr('target', '_blank');
If it's a particular div you're interested in, give that element an id attribute and then use it like so:
$('#divid a').attr('target', '_blank');
replacing "divid" with the id in question.
Can you be more specific about what exactly you want?
In any case, you're going to need to use the attr() function to set the attribute; see the documentation here.
You are probably interested in a single div, not every div on page, so You have to identify it.
$('div#theDivsId a').attr('target','_blank');
or
$('div.theDivsClass a').attr('target','_blank');
PS. read documentation. it's easy.
jQuery("#yourDIV a").attr("target", "_blank");
Have you read the jQuery docs? This can't be more basic.
$('div a').attr('target','_blank');

Categories

Resources