I need to make "bold" the second column of this html table:
http://jsfiddle.net/beKC4/4/
How can I do using JQuery?
I tried this but is not working:
$("h3.ms-standardheader").children("td").text("<b>"+this.text()+"</b>")
you can also use css
see here http://jsfiddle.net/beKC4/6/
table tr td:nth-child(3){
font-weight:bold;
}
Use .html() instead
$(".ms-standardheader").closest('tr').find("td").html(function () {
return "<b>" + $(this).text() + "</b>"
});
Also, the selector is incorrect, you need to use closest, then find the <td>
DEMO
Or if you don't want ms-standardheader to also get <b> you can use siblings()
$(".ms-standardheader").closest('td').siblings("td").html(function () {
return "<b>" + $(this).text() + "</b>"
});
DEMO
You can use this. Create a css class and add this class with js using :nth-child(). Think is simplier.
css
.bold{
font-weight: bold;
}
js
$('table td:nth-child(3)').addClass('bold');
fiddle
http://jsfiddle.net/b4AwC/
I would use nthchild selector, if you want ever other one bold you can put in even or odd
I hope this help
$("tr td:nth-child(2)").css({"color":"red"});
$("tr td:nth-child(even)").css({"background":"grey"});
Related
I can use one variable in addClass/removeClass
html:
<body>
<p>Hello</p>
<p>and</p>
<p>Goodbye</p>
</body>
css:
p {
margin: 8px;
font-size: 16px;
}
.selected {
color: red;
}
.highlights {
background: yellow;
}
js:
var css1="selected";
var css2="highlights";
$( "p:last" ).addClass(css1);
I want use css1 and css2 variables in addClass method. I tried these:
$( "p:last" ).addClass(css1 css2);
$( "p:last" ).addClass("css1 css2");
They don't work.
If I use this:
var css3="selected highlights"
$( "p:last" ).addClass(css3);
it works
But how can I use css1 and css2 variables in addClass method ?
You can try on http://jsfiddle.net/hasyo1qm/
Thanks.
As noted elsewhere, you need to create a white-space separated string from your variables; one means (as shown):
$( "p:last" ).addClass(css1 + ' ' + css2);
Another alternative, however, which is slightly easier to type, is to use Array.prototype.join():
$( "p:last" ).addClass([css1, css2].join(' '));
JS Fiddle demo.
This, realistically, only becomes easier when you have more than two, or three, classes to concatenate.
References:
Array.prototype.join().
This works:
$( "p:last" ).addClass(css1+" "+ css2);
Both class names need a space between them, so using concatenation we have to add a space between them, otherwise it will not behave right.
UPDATED FIDDLE:
http://jsfiddle.net/ehsansajjad465/hasyo1qm/2/
You need to concatenate your variables:
$( "p:last" ).addClass(css1 + ' ' + css2);
updated jsFiddle
Try
var css1 = " selected "; // added space before and after text in string
var css2 = " highlights "; // added space before and after text in string
$( "p:last" ).addClass(css1 + css2);
http://jsfiddle.net/hasyo1qm/4/
Simpliest way is to call addClass multiple times but in one line:
$('p:last').addClass(css1).addClass(css2);
If you click on a cell on this page, it loads the larger version of the image. I'm trying to achieve this same effect.
What I have gotten so far: http://jsfiddle.net/8mYW9/
First off I know having the "appear" <div> is redundant - is there a good way to utilize $(this) and appendTo(); instead?
Ultimately my idea is to grab the id of the anchor contained within the div that is clicked and to append it to the cell. What should I be doing...?
If you change the ID attribute to class for the appear elements you can do this:
$(document).ready(function() {
$('#appear').hide();
$('.links').click(function() {
var $this = $(this);//cache the $(this) selector since it will be used more than once
$this.children('.appear').html('item id: ' + $this.children('a').attr('id')).fadeToggle('slow');
});
});
Demo: http://jsfiddle.net/8mYW9/7/
BTW you can't have multiple elements with the same ID in a HTML document.
You could do that with:
$(document).ready(function() {
$('#appear').hide();
$('.links').click(function() {
$(this).append('<div>' + $(this).find('a:first').attr('id') + '</div>');
});
});
JS Fiddle demo.
Amended so that only one id is shown (others are removed before showing the latest):
$(document).ready(function() {
$('#appear').hide();
$('.links').click(function() {
$(this).closest('.container').find('.appended').remove();
$(this).append('<div class="appended">' + $(this).find('a:first').attr('id') + '</div>');
});
});
JS Fiddle demo.
Incidentally, it escaped my notice the first time, but with multiple elements sharing the same id you have invalid (X)HTML: an id must be unique within the document (citation: W3.org).
References:
attr().
closest().
find().
:first selector.
remove().
Try using class selectors instead. You've got duplicate IDs:
$(document).ready(function() {
$('.appear').hide();
$('.links').click(function() {
$(this).find(".appear").fadeToggle('slow', function() {
$(this).html('item id:')
});
});
});
http://jsfiddle.net/8mYW9/
I have the following html...
<div class="display">sometext</div>
<div class="display">sometext</div>
<div class="display">sometext</div>
Using jQuery I want to be able to click the first div and an alert is displayed saying that you have clicked the first div and so on. I know how to count the number of divs with a specific class but not how to tell which one is clicked.
Behind the scenes, .index() also loops through all previous elements. The following alternative is more efficient than .index() when the element has lots of siblings.
$(".display").each(function(i){
$(this).click(function(){
alert("Clicked div.display, number " + i);
}
});
I'm not sure about 'first' as such, but you could try:
$('.display').click(
function(){
alert("You clicked div number: " + ($(this).index('.display') + 1) + ", of " + $('.display').length);
});
JS Fiddle.
References:
.index().
Here's a simple way.
$divs = $('.display');
$divs.click(function(){
alert( $divs.index($(this)) );
})
Fiddle to go with it.
The answer is simple and proven by this jsfiddle:
var containers = jQuery('.display');
containers.bind('click', function(event){
alert('Clicked element no. ' + (containers.index(this)+1));
});
Please let me know if it helped.
You can do just:
HTML
<div class="display" name="1">sometext</div>
<div class="display" name="2">sometext</div>
<div class="display" name="3">sometext</div>
JavaScript
$('.display').click(function(){
alert($(this).attr('name'));
});
Demo : http://jsfiddle.net/SzwJU/
Why use jQuery? You can write a simple javascript that is triggered onclick by the div.
How would i select the below item, i do not want to select every LI of .top but just the LI i have just created on the append.
How is this possible?
$('.top').append('<li><span>' + html + '</span></li>');
You could do it the other way around using appendTo()
var li = $('<li><span>' + html + '</span></li>').appendTo('.top');
This way you don't have to select it after appending it.
Use the :last pseudo-class selector.
$('.top > li:last')
Alternate option: consider creating the element slightly differently.
var $li = $('<li><span>' + html + '</span></li>');
$('.top').append($li);
// you already have the <li> selected, in $li
You could probably select the last one:
$('.top').last()
See: http://api.jquery.com/last/
Is there any ways to add different style class to all li in a ul tag using jquery/javascript/php.
Consider I have a list as follows
<ul><li>a</li><li>b</li><li>c</li><li>d</li><li>e</li></ul>
I would like to add as follows
<ul><li class='cat1'>a</li><li class='cat2'>b</li><li class='cat3'>c</li><li class='cat4'>d</li><li class='cat5'>e</li></ul>
As simple as:
$('ul').children('li').addClass(function (i) {
return 'cat' + (i+1);
});
http://api.jquery.com/addClass/
If you want to set the class, the cheaper way to do it is by using .attr() and the index in its setter function, like this:
$("ul li").attr("class", function(i) {
return "cat" + (i+1);
});
If you aren't setting it and just adding, use .addClass(function(i) instead of .attr("class", function(i).
$('ul').children('li').each(function(i,v){
$(this).addClass('cat'+(i+1));
});