so title is kinda messy, can't really explain in so little words.
So, as you can see in the print, I have an ID with the name "b2-Carousel", couple childs below I have a class called "active" and a couple childs below that class I have a text that starts with "Id:" I need to get those last digits after the "Id:" with JS.
I need to acess the text that starts with "Id:" that's somewhere inside a class "active, that's somewhere inside an id "b2-Carousel".
Hopefully that explains it, is this possible to do in JS?
Code Print
Select the element by ID...
Select the next element by class
Select the next element by attribute
So the selector would look like:
var text = document.querySelector('#b2-Carousel .active [data-expression]').textContent;
/* get all divs inside #b2-Carousel -> .active */
let divs = document.body.querySelector('#b2-Carousel .active div')
/* convert nodeList to array */
divs = [...divs]
/* filter array for only divs that include the text 'Id' */
let ids = divs.filter((div) => div.textContent.includes('Id'))
/* in ids array you'll find all divs that include the text id
Related
Above I have three banner elements that I want to mark as unread if they are clicked. I structured each banner so that they have a span element within a nested div as shown with the image below (the red dot comes from the span element):
My javascript for this function is the following code:
I am trying to add a class ".read-dot" to the ".dot" span element that will hide it. I would like to add this class to the ".dot" span element that is inside the div that the user would click on. Any help would be appreciated.
I tried accessing the this.$(".dot) to access the dot element of the current object that triggered the event, but I now see this syntax is incorrect. I am new to jQuery which is why I tried this; I also could not find the page most relevant to my question on the API doc.
First, you have to remove click accessibility for the child.
$('div.banner > *').css('pointer-events', 'none');
And then, you can use the jquery selector for the .unread class to remove the class and replace .dot with .read-dot
$('.unread').click((e) => {
let clickedElm = e.target;
clickedElm.classList.remove('unread');
clickedElm.querySelector('span').classList.remove('dot');
clickedElm.querySelector('span').classList.add('read-dot');
})
I have a class named X which has multiple <span> inside and I also have a css selector X span.
In JavaScript how can I use X span instead of X in the following case:
document.querySelector('.ABC').classList.add(X)
I tried document.querySelector('.ABC').classList.add(X span) which definitely isn't working.
In Javascript, working with the HTML works like this:
You ask the browser to give you an object or list of objects that correspond to the HTML elements
You use the objects to modify the page
If I understand correctly, what you want to do is:
Find element by className ".ABC"
Find "span"-s inside that element
Give those spans a class
To do those, follow these steps:
// get the first element that matches .ABC
let parent = document.querySelector(".ABC");
// now parent is either an Element, or undefined/null
// if it's not null, we can call querySelectorAll
// get all elements inside the parent that are spans
let spans = parent.querySelectorAll("span");
// spans is now either an array of Elements, or undefined/null
// if it's not null, we can iterate over it
for (let span of spans) {
span.classList.add('X');
}
I'm wondering how to reference an HTML id or a class in JavaScript in the following context.
<script type="text/javascript">
(function() {
var menu = document.querySelector('ul'),
menulink = document.querySelector('**REFERENCE CLASS**');
menulink.addEventListener('click', function(e) {
menu.classList.toggle('active');
e.preventDeafult();
});
})();
</script>
I'd appreciate any help I can get, thanks.
Let's say you have an element with class attribute equals to "my-class" and you want to select that element with JavaScript. Here as an example i'll select an element based on its class attribute and change his color to green using only JavaScript.
// referencing the element with class attribute containing my-class using querySelector() method that you used it in your code, notice the " . " (dot) before the class-name
var myClassDiv = document.querySelector('.my-class');
// changing the text color to green
myClassDiv.style.color = '#0F0';
<div class="my-class">by default my color is black but JavaScript made me green !</div>
Explanation:
The method querySelector() receives a string representing a fully qualified CSS selector. i.e querySelector('body #main > ul.menu > li.class-name') and as the same selector can match many elements in the same document this method returns only the first element matched by the selector.
To get all the elements matching a selector you could use querySelectorAll() that returns an array of the matched elements.
You wanted to select an element based on it's class-name, JavaScript provides a method that fetches all the elements based on a class-name: getElementsByClassName() that returns an array containing the matched ones even if there is only one element. It rereceives a string representing a class-name, NOT as you write it in CSS i.e getElementsByClassName('class-name') NO dot before the class-name.
To do the same task as we did in the top of that answer
, I'll be using the getElementsByClassName() instead of querySelector().
// referencing the element with class attribute containing my-class
var myClassDiv = document.getElementsByClassName('my-class')[0];
// changing the text color to green
myClassDiv.style.color = '#0F0';
<div class="my-class">by default my color is black but JavaScript made me green !</div>
Hope I pushed you further.
I am cloning a div (with an h3, a paragraph, and a clickable tag line) on the click of the tag line and appending the div to my sidebar. There is several divs with this same structure and when a div has already been cloned I want to make sure that that div is not cloned a second time. To accomplish this I am trying to match the H3 text of the div whose tag line was clicked with the H3 text of divs that have already been cloned. If there is a match, I pop up an alert message and don't append the cloned div to the side bar.
Here is the code i have:
$(this).click(function(){ // where $(this) is the tag line
var clone = $(this).parents('.full_result').clone(); // on the click of the tag line, find the parent whose class is .full_result and clones it (.full_result is the class of all divs)
var jobsH3 = $(this).parents('.full_result').find('h3').text(); // returns the text of the H3 that is contained in the same div as the clicked tag line
var middleColumnInnerDiv=$('#middle_column').find('.full_result').find('h3').text(); // returns the text of all h3 whose divs have been cloned to the side bar(sidebar id= #middle_column)
//below is where the magic should happen, but i cannot make it work. Tried several selectors and methods. The :contains is but one of them.
$(this).parents('.full_result').find('h3').each(function(){
if('middleColumnInnerDiv:contains(jobsH3)'){ // this line is giving me a headache
alert('You already saved this information');
} else {
clone.appendTo('#middle_column').hide().fadeIn(750);
}
});
};
Any help is much appreciated!
you are missing $ Jquery notation. try this $("middleColumnInnerDiv:contains('.jobsH3')")
i am trying to check an auto generated span class="" content , which i will use it as a condition to determine whether i will show a message to the user or not
here is the span
<span id="sprytextfield1" class="textfieldInvalidFormatState">
what i tried here is to put a Div called email with an id so i can use the following
if ($('email').html('<span id="sprytextfield1" class="textfieldInvalidFormatState">'))
{
alert ("error");
}
but this did not work because if put the span inside my div email this will stop the JavaScript and result in error, because for some data condition i can not close the div at the end of the span.
is there any way to get the span class without putting all the span inside a div ?
Check: http://jsfiddle.net/pratik136/YY5RR/
This will let you get the class of all spans.
If you want to append a span to your div and still get a reference to it (so you can modify it further), I'd suggest doing like this:
$("#email").html(""); // optional: clear email
var mySpan = $('<span id="sprytextfield1" class="textfieldInvalidFormatState"/>').appendTo($('#email'));
Then you can add more things to the span, like text or other elements:
mySpan.text("some text");
mySpan.append('<a>some link</a>');
You mentioned you can't close the div after the span, I understood that you want to add more elements to it, is that correct? Just append (or prepend) them, after creating the span:
$("#email").append(someElement); // Will appear in the end, after the span
$("#email").prepend(someElement); // Will appear in the beginning, before the span
Update: re-reading your question, it's not clear to me what you're trying to check. Will the span be already in your document, and you just want to see whether or not it has a specific class (that you already know)? If that's the case, get the element (you have its id) and use hasClass on it:
if ( $("#sprytextfield1").hasClass("textfieldInvalidFormatState") ) {
alert("error");
}