I have an element in CSS. I'm using:
ul.bjqs-controls.v-centered {to add style to it}
But in JS I need to define it and I don't have and Id, the only way to define is ul.bjqs-controls.v-centered.
I'm new in JS.
Should I use getElementById? Or what?
EDIT:
I'm trying to use jquery, but it's first time I use it, I'm trying to change element's (ul.bjqs-controls.v-centered) width to window width on page resize, but it doesn't seem to work :/
$(window).resize(function() {
$("ul.bjqs-controls.v-centered").width()=$(window).width();
});
getElementsByClassName("classname") will return a nodeList. You can loop in it and reach item what you want.
Please have a look at http://api.jquery.com/category/traversing/tree-traversal/
You can find the element by using other identified elements or using classes as people mentioned above.
you can use jquery like below
$(".ul.bjqs-controls.v-centered").html()
like that
Related
I'm trying to get the IDs of SVG elements except for a specific one being passed to the highlight() function by combining the children() method with the not() method singling out the specific ID.
var allOthers = $(".container").children().not(elem);
I want to affect all other elements' opacity. I tried this way of singling out a specific element ID out of a whole array of them before on some other pr0ject, but I don't know why it says that allOthers is undefined. Am I doing something wrong here?
I made a fiddle.
It is not allOthers which is undefined, it is allOthers.style. You are using vanilla js when you meant to use jQuery, change...
allOthers.style.opacity = "0.1";
for:
allOthers.css("opacity", "0.1");
I am trying to make a basic captcha module for jQuery. I have a decent start on it, but for some reason .children() doesn't seem to work. See it here: http://jsfiddle.net/pTbeW/
I currently have this:
$(this).children('.captchain-start').hide();
$(this).children('.captchain-show').show();
If I change it to
$('.captchain-start').hide();
$('.captchain-show').show();
it works perfectly. But this solution is less than ideal, because it wouldn't allow two instances of this captcha to be on the same page. I suspect it has to do with the html being set by query, but I'm not sure how. I'm far from a javascript and jQuery expert, but this seemed like a relatively easy thing to do. What am I missing? Do I have tired eyes from looking at it so long? Any help would be appreciated.
Because the '.captchain-*' elements are not children, but are siblings. Try the following:
$(this).nextAll('.captchain-start').hide();
$(this).nextAll('.captchain-show').show();
You should use $(this).nextAll() instead of $(this).children() because the elements you want to hide and show are not children of the a element, but siblings.
See http://api.jquery.com/nextAll/
this
In your click event references the clicked element, which is the element with the class 'captchain-start'. So you do not have to scan for the children, you can use:
$(this)
for the actually clicked element or the element selector instead
instead.
I need to set the class for an element in my page. With plain JavaScript, I would write something like:
document.getElementById('foo').className = "my_class";
This just sets the class, which is exactly what I want. But I'm using jQuery on my page and so would like to do this in a "jQuery way", since it seems weird to mix the old style and the jQuery style. But jQuery apparently only allows you use addClass() or removeClass(), like so:
$('#foo').addClass("my_class");
The problem is that it merely adds a class to the element, it does not replace the currently existing class. Does this mean I have to keep track of the old class and do a removeClass() first? Is there no way to tell jQuery to replace the current class no matter what it is and just replace it with a new one?
To remove all classes from an element:
$('#foo').removeClass();
Specifying no arguments to removeClass removes all the classes. So your solution would be:
$('#foo').removeClass().addClass('my_class');
Set the class attribute directly using .attr():
$('#foo').attr('class', 'my_class');
You could use the .attr() function like so:
$('#foo').attr('class', 'my_class');
You could use that:
$('#foo').attr('class', 'my_class');
It will replace any class with "my_class"
$('#foo').removeClass().addClass('my_class');
Ah, found the answer just seconds after I posted the question. Apparently my Google skills were insufficient... :-(
At any rate, the answer is in the removeClass() function. So, you can do:
$('#foo').removeClass().addClass("my_class");
Couldn't be simpler.
you can try using .toggleClass()
How can I access any <div> if I don't declare the id attribute. Does DOM create ID itself?
e.g.
<div class="common_class" onmouseover="know_your_div(this)">
</div>
<script type="text/script">
function know_your_div(obj){
/*
Here i want to access the div object not by class because of it's common
for all div
*/
}
</script>
Well, the answer to your question is right there in your code.
The obj parameter that your know_your_div function takes is supplied as this in the onmouseover attribute. Thus, that is your div.
There's not an easy way to get to it in all browsers. Your best bet is to just create an ID on it. Is there a reason you can't?
Short of that, you have to navigate to it using DOM traversal methods, which are horribly unstable if your DOM structure changes at all. Code like:
document.body.childNodes[3].childNodes[2].childNodes[4];
or
document.getElementsByTagName('DIV')[22]; // 23rd DIV in the page
etc...
The answer is in your Question, let me try to help you
<div class="common_class" onmouseover="know_your_div(this)"> </div>
var oldObject = "";
function know_your_div(obj) {
// write ur condition if/ese/while/..
obj.parentNode.do_Something(); OR obj.parentNode.ID/Class/value
oldObject = obj;
}
then I guess you need to specify the ID explicitly alongside the class name..DOM won't create the ID itself...
Then it's time to use the DOM. Maybe you could use things like firstChild, lastChild, nextSibling.. http://de.selfhtml.org/javascript/objekte/node.htm
If you're using a JS library, like MooTools or jQuery, which I reccomend, you'll have a lot of powerful selector magic at your hands (example http://mootools.net/demos/?demo=Slick.Finder).
Why not use JQuery and selectors?
http://api.jquery.com/id-selector/
No, the DOM does not create an ID. You need to add an ID. You can use jQuery to access a div by it's class.
I'm trying to change the border color of an image using its id with jquery
( photo['id'] is passed in from a previous function )
the ids of the photos are of the form 'photo239839'
$('#photo'+photo['id']+'').click(function(){
$('#photo'+photo['id']+'').css('border-color','#777');
});
When I try to use this same code using its class it works,
but I can't use this method since there are multiple images on the same
page with the same class
$('img.flickr_photo').click(function() {
$("this.flickr_photo").css('border-color','#777');
});
This is what you need to do:
$('img.flickr_photo').click(function(){
$(this).css('border-color','#777');
});
I would always always add a css class rather than an inline style.
Much more maintainable and extensible.
Example:
$('img.flickr_photo').click(function(){
$(this).addClass('greyishBorder');
});
Either photo['id'] is wrong, or is changing after you set up the click handler.
To test for the first case, you can alert (or console.log with FireBug, or whatever) the length of the jQuery selection:
alert($('#photo'+photo['id']).length);
The solution in the second case is to use 'this'. In the click handler, 'this' is set to the element that caused the click event.
$('#photo'+photo['id']).click(function(){
$(this).css('border-color','#777');
});
Edit: #Dreas Grech is right, as long as you want to apply the behavior to all the elements with the flickr_photo class. If you can generalize the selector to select all the elements with a single query, it's better to do that.