<div class="generic_layout_container layout_ride_ridespec">
</div>
How to programmicaly add an extra class or one more property with existing class to above div.
I would like out put as follows
<div class="generic_layout_container layout_ride_ridespec example_class">
</div>
Please excuse id/name solution, there is little difficulty to add an id or name for above element.
Thanks
MooTools does have an addClass() method. Eg:
HTML
<div id="myElement" class="testClass"></div>
Javascript
$('myElement').addClass('newClass');
Related
I am trying to bind a class name inside Angular ngClass so that the user will be able to set any class name he likes to the element.
I have the following in my js file and would like to assign this class name to the div element if this.customClass is set.
this.customClass= "list-custom-class";
HTML
<div class="row" [ngClass]="'{{customClass}}'}"></div>
To bind class
<div class="row" [ngClass]="customClass"></div>
please check the below
https://angular.io/api/common/NgClass
You can't use string interpolation in ngClass.Please use below it may help.
[ngClass]="[customClass]"
<div class="row {{customClass}}"></div>
No need of using ngClass.
I have a div which I would like to hide along with all of its children. I thought that a simple selector.hide() would do the trick but it's still there.
HTML
<div class="row well">
<div class="artistAlbumInfo well col-md-6 ">
<h3><span id="artist"></span> - <span id="track"></span></h3>
<img src="" id="art" class="albumArt">
</div>
<div class="col-md-6">
<h3 id="album"></h3>
<h4>Playstate <p id="playState"></p></h4>
<h4>Position <p id="position"></p></h4>
</div>
</div>
JQuery
$(document).ready(function() {
$('.row .well').hide();
});
http://jsfiddle.net/375c8v2a/1/
Any ideas?
You don't need a space between classes if you want to hide only those with both classes
$('.row.well').hide();
To do either or add a comma
$('.row, .well').hide();
What you have didn't work because .row .well means "an element with class well inside (as a child or deeper descendant) an element with class row. In CSS, the space is the descendant combinator.
To seelct the element that has both classes, remove the space:
$(document).ready(function() {
$('.row.well').hide();
// ----^
});
That means "an element with class row and class well".
$('.row').hide();
please remove second class
From what I've read on the comments the .well class was intentionally created to specify which .row class will be hiding since you have a lot of row classes. Then you can use it as the trigger to hide that row, instead of doing: $('.row.well').hide(); you can just simply specify the targeted class by doing:
$('.well').hide();
Click here to see a example on jsFiddle
I want to add id="draggable" attributes to all tags.
For example -
<img src="http://sample.jpg"> should change to <img src="http://sample.jpg" id="draggable" >
<p>abcd</p> should change to <p id="draggable">abcd</p>
This should apply to all tags except <HTML><HEAD><script><style>
Any suggestion?
Use class instead of Ids
var elems = document.body.getElementsByTagName("*");
elems.setAttribute("class","draggable");
ID(s):
Each element should only have one ID
Each page can only have one element with that ID
CLass(s):
You can use mutliple classes on one element.
You can use the same class on multiple elements
Adding same id to all the HTML elements is not a good way. Better to have same class name. Dynamically, if you want to add same class to all the elements, you can do something like below
$('#parent').find('*').addClass('draggable');
http://jsfiddle.net/663m8qyd/
<div id='parent'>
<p>ABC</p>
<img src='http://www.w3schools.com/tags/smiley.gif' alt="Smiley face"/>
<div id='child'>
<div id='child1'>test1</div>
<div id='child2'>test2</div>
</div>
</div>
To add draggable class to all the elements inside parent div, find each element and add respective class.
Hope that helps!
I have the next code dynamically created using JQuery. Theere are multiple row class divs placed one under the other.
<div class="row">
....
</div>
<div class="row">
<div class="line_type"></div>
<div class="download_value"></div>
<div class="flag"></div>
<div class="email"></div>
<div class="prize"></div>
</div>
<div class="row">
....
</div>
After i create these divs I have a "pointer" to a specific div which is of class row. In JQuery, how do i make it so I go down the DOM tree, until i reach the div of class line_type and download_value and remove them both, and also I'd like to go one more node down, at the div of type email and change some of it's CSS attributes.
I was not able to find anything on the web, maybe it's cause i'm a noob at these still.
I have a "pointer" to a specific div which is of class row ->
Assuming that you have the this object of the corresponding div with class row.. then you can use .find to get the line_type and download_value inside that div.
$(this).find('.line_type').remove();
$(this).find('.download_value').remove();
Then you can use the same .find to get the div with class email and access the .css
$(this).find('.email').css(/* You code*/);
Assuming row_pointer points to the row in question:
$('.line_type, .download_value', row_pointer).remove();
$('.email', row_pointer).css(...);
check this out
$('div.row').bind('click', function() {
$this = $(this);
$('div.line_type, div.download_value', $this).remove();
$('div.email', $this).css('background-color', 'red');
});
http://jsfiddle.net/YvyE3/
Basically what I have is this:
<body>
<div class="class1">
</div>
<div class="class2">
</div>
<div class="class3">
</div>
...
</body>
I have no idea why the site creator used classes instead of IDs (they're unique), but it doesn't really matter as I'm writing a GM script and so getElementsByClassName('')[0] effectively does the same thing.
How can I insert an element between the first and second div?
Create your own insertAfter function
you can use JQuery it very simple
$(".class1").after( document.createTextNode("Hello") );