I have several divs which should be shown / hidden when the corresponding button is clicked. In the initial state all buttons and all divs are visible. When the first button is clicked, only the corresponding div should be visible. When the second button is clicked, the corresponding div should be visible as well etc. The click on a button should toggle the state of the button and the corresponding div.
I'm not sure if this can be realized without placing a cookie or local storage token. So far I've created the following code, which only allows me to deactivate the divs with one first click.
$(function() {
$('.button').click(function(){
$(this).toggleClass('inactive');
$('#mydiv'+$(this).attr('target')).toggle();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<button class="button" target="1">Button 1</button>
<button class="button" target="2">Button 2</button>
<button class="button" target="3">Button 3</button>
</div>
<div id="mydiv1">
<p>Div 1</p>
</div>
<div id="mydiv2">
<p>Div 2</p>
</div>
<div id="mydiv3">
<p>Div 3</p>
</div>
If you want to toggle only the button/div that you just clicked, first you have to reset previous state of all elements to initial (remove class inactive and show all divs) and only than toggle state.
$(function() {
$('input[type="checkbox"]').change(function() {
let checked = $('input[type="checkbox"]:checked');
$('.inactive').removeClass('inactive');
if (checked.length == 0) {
$('.subdiv').show();
return;
}
$('input[type="checkbox"]:not(:checked)').closest('label').addClass('inactive');
$('.subdiv').hide();
checked.each(function () {
$('#mydiv' + $(this).val()).toggle();
});
});
});
.inactive {
color: red;
}
label input {
display: none;
}
label {
border: 1px solid gray;
border-radius: 3px;
padding: 2px 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<label><input type="checkbox" value="1"/>Button 1</label>
<label><input type="checkbox" value="2"/>Button 2</label>
<label><input type="checkbox" value="3"/>Button 3</label>
</div>
<div id="mydiv1" class="subdiv">
<p>Div 1</p>
</div>
<div id="mydiv2" class="subdiv">
<p>Div 2</p>
</div>
<div id="mydiv3" class="subdiv">
<p>Div 3</p>
</div>
You'd have to initially hide the divs and show the correct one when the right button is clicked.
$(function() {
$('.button').click(function() {
$(this).toggleClass('active');
$('#mydiv' + $(this).attr('target')).toggle();
});
});
/*
Hide all divs that have an id starting with "mydiv"
*/
div[id^="mydiv"] {
display: none;
}
.active {
background-color: green;
color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<button class="button" target="1">Button 1</button>
<button class="button" target="2">Button 2</button>
<button class="button" target="3">Button 3</button>
</div>
<div id="mydiv1">
<p>Div 1</p>
</div>
<div id="mydiv2">
<p>Div 2</p>
</div>
<div id="mydiv3">
<p>Div 3</p>
</div>
Have you to use a toggle or you can also solve it with a walk around?
$(function() {
$('.button').click(function() {
$('.inactive').removeClass('inactive');
$(this).toggleClass('active');
$('.subdiv').show();
$('.mydiv' + $(this).attr('target')).toggle();
});
});
/*
Hide all divs that have an id starting with "mydiv"
*/
.active {
background-color: green;
color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<button class="button" target="1">Button 1</button>
<button class="button" target="2">Button 2</button>
<button class="button" target="3">Button 3</button>
</div>
<div class="mydiv1" hidden>
<p>Div 1</p>
</div>
<div class="mydiv2" hidden>
<p>Div 2</p>
</div>
<div class="mydiv3" hidden>
<p>Div 3</p>
</div>
Related
I'm making a web calculator with 2 fields to take inputs, and I want to change its type to paragraph. How to do so? And how add listeners to support tapping on the paragraphs to make them “active” and indicate this somehow with CSS?
Once the web page gets opened somehow I want to take values from the 2 fields.
<div class="calculator">
<div class="screen"></div>
<div class="inputs">
<p id="carbs">Carbs/100g</p>
<p id="portion">Portion (g)</p>
</div>
<div class="calcul">
<button id="one">1</button>
<button id="two">2</button>
<button id="three">3</button><br>
<button id="four">4</button>
<button id="five">5</button>
<button id="six">6</button><br>
<button id="seven">7</button>
<button id="eight">8</button>
<button id="nine">9</button><br>
<button id="zero">0</button>
<button id="decimal">.</button>
<button id="clear">C</button><br>
<button id="save">Save</button>
<button id="equals">=</button>
</div>
</div>
To change the input fields to paragraphs and add listeners to them, you can do the following:
const carbsField = document.querySelector("#carbs");
const portionField = document.querySelector("#portion");
carbsField.addEventListener("click", () => {
carbsField.classList.add("active");
portionField.classList.remove("active");
});
portionField.addEventListener("click", () => {
portionField.classList.add("active");
carbsField.classList.remove("active");
});
.input-field {
background-color: lightgray;
padding: 10px;
border-radius: 10px;
cursor: pointer;
display: inline-block;
}
.input-field.active {
background-color: gray;
color: white;
}
<div class="calculator">
<div class="screen">
</div>
<div class="inputs">
<p id="carbs" class="input-field">Carbs/100g: <span id="carbs-value">0</span></p>
<p id="portion" class="input-field">Portion (g): <span id="portion-value">0</span></p>
</div>
<!-- rest of the HTML code -->
</div>
I'm trying use append to give each button it's own div (.modal-item) that can be created and removed inside of the .modal container when the button is clicked. Each .item has it's own button and different content nested inside.
What I need as an example: If I click the button labelled Btn 1, I want a .modal-item div created inside of .modal that has the content from the Btn 1 .item. If I click Btn 1 again, it is removed. The same goes for each of the buttons.
The buttons should act as a checkbox for creating and removing the .modal-items. So in other words, the adding/removing of each .modal-item is handled by it's button.
$(function() {
$('#btn').click(function() {
var newDiv = $('<div class="modal-item"><h4><a>Dynamic Title</a></h4> </div>');
$('.modal').append(newDiv);
});
});
.container {
display: flex;
border: 1px solid blue;
}
.item,
.modal-item {
width: 100px;
border: 1px solid;
}
.modal {
display: flex;
border: 1px solid green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="item">
<button id="btn">Btn 1</button>
<h4> Test 1 </h4>
<div class="subtitle"> Title 1 </div>
<div class="info"> This is Info / Description 1. </div>
</div>
<div class="item">
<button id="btn">Btn 2</button>
<h4> Test 2 </h4>
<div class="subtitle"> Title 2 </div>
<div class="info"> This is Info / Description 2. </div>
</div>
<div class="item">
<button id="btn">Btn 3</button>
<h4> Test 3 </h4>
<div class="subtitle"> Title 3 </div>
<div class="info"> This is Info / Description 3. </div>
</div>
</div>
<div class="modal"></div>
1st: id must be unique so you need to change id="btn" to class="btn"
2nd: by using data attribute for each btn and pass it to the modal-item div it can be done
$(function() {
$('.btn').click(function() {
var newDiv = $('<div data-btn="'+$(this).attr("data-btn")+'" class="modal-item"><h4><a>Dynamic Title'+ ($(this).closest('.item').index() + 1) +'</a></h4> </div>');
if($('.modal .modal-item[data-btn="'+$(this).attr("data-btn")+'"]').length < 1 ){
$('.modal').append(newDiv);
}else{
$('.modal .modal-item[data-btn="'+$(this).attr("data-btn")+'"]').remove();
}
});
});
.container {
display: flex;
border: 1px solid blue;
}
.item,
.modal-item {
width: 100px;
border: 1px solid;
}
.modal {
display: flex;
border: 1px solid green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="item">
<button class="btn" data-btn="btn1">Btn 1</button>
<h4> Test 1 </h4>
<div class="subtitle"> Title 1 </div>
<div class="info"> This is Info / Description 1. </div>
</div>
<div class="item">
<button class="btn" data-btn="btn2">Btn 2</button>
<h4> Test 2 </h4>
<div class="subtitle"> Title 2 </div>
<div class="info"> This is Info / Description 2. </div>
</div>
<div class="item">
<button class="btn" data-btn="btn3">Btn 3</button>
<h4> Test 3 </h4>
<div class="subtitle"> Title 3 </div>
<div class="info"> This is Info / Description 3. </div>
</div>
</div>
<div class="modal"></div>
I'm learning jQuery's hide/show function, and I need to have it so when I click on a div, it shows that div, and hides the other. Right now I have a SUPER janky, and SUPER inefficient way of doing it:
$(document).ready(function(){
$(".FifteenInfo").hide();
$(".FourtyInfo").hide();
$(".SixtyInfo").hide();
$(".FifteenSpecs").hide();
$(".FourtySpecs").hide();
$(".SixtySpecs").hide();
$(".Show15").click(function(){
$(".FifteenInfo").show();
$(".FifteenSpecs").show();
$(".FourtySpecs").hide();
$(".SixtySpecs").hide();
$(".FourtyInfo").hide();
$(".SixtyInfo").hide();
});
});
My HTML:
<div class="buttons">
<button class="buttonText Show15" width="200" height="300">DSL 6</button>
<button class="buttonText Show40" width="200" height="300">DSL 10</button>
<button class="buttonText Show60" width="200" height="300">DSL 15</button>
<button class="buttonText Show40" width="200" height="300">DSL 25</button>
<button class="buttonText Show60" width="200" height="300">DSL 50</button>
</div>
<div class="FifteenInfo border">
<h1 class="Package">DSL 6</h1>
<div class="cableSpacer"></div>
<h3 class="monthlyPrice">\$29.99</h3>
<div class="cableSpacer"></div>
<h3 class="differentbandwidth">\$39.99 Unlimited</h3>
</div>
<div class="FifteenSpecs">
<div class="monthlyUsage">
<h3 style="text-align: center;">Usage</h3>
<h1 class="Usage">150</h1>
<p class="Gigabyte">GB</p>
</div>
<div class="Download">
<h3 style="text-align: center;">Download</h3>
<h1 class="Usage" style="text-align: center;">6</h1>
<p class="Megabyte">Mbps</p>
</div>
<div class="Upload">
<h3 style="text-align: center;">Upload</h3>
<h1 class="Usage" style="text-align: center;">800</h1>
<p class="Megabyte">Kbps</p>
</div>
<div class="orderNow">
<button class="btn btntruespeed orderButton">Order Now!</button>
</div>
</div>
<div class="FourtyInfo border">
<h1 class="Package">DSL 10</h1>
<div class="cableSpacer"></div>
<h3 class="monthlyPrice">\$29.99</h3>
<div class="cableSpacer"></div>
<h3 class="differentbandwidth">\$44.99 Unlimited</h3>
</div>
<div class="FourtySpecs">
<div class="monthlyUsage">
<h3 style="text-align: center;">Usage</h3>
<h1 class="Usage">150</h1>
<p class="Gigabyte">GB</p>
</div>
<div class="Download">
<h3 style="text-align: center;">Download</h3>
<h1 class="Usage" style="text-align: center;">10</h1>
<p class="Megabyte">Mbps</p>
</div>
<div class="Upload">
<h3 style="text-align: center;">Upload</h3>
<h1 class="Usage" style="text-align: center;">1</h1>
<p class="Megabyte">Mbps</p>
</div>
<div class="orderNow">
<button class="btn btntruespeed orderButton">Order Now!</button>
</div>
</div>
So is there a way to do this where it automatically checks which div you clicked on to show it, and to hide the others?
Thanks in advance.
The generic way to do this is to link up the trigger element with its content using data-* attributes, along with giving all content elements a shared class so they can all be hidden in one.
$('.content').hide();
$('.btn').click(function(){
$('.content').hide()
var target = $(this).data("target");
$(target).show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn" data-target="#content1">Show 1</button>
<button class="btn" data-target="#content2">Show 2</button>
<div id="content1" class="content">Content 1</div>
<div id="content2" class="content">Content 2</div>
$(".header").click(function() {
//current div
$header = $(this);
//getting the next element
$content = $header.next();
//Hide all other than current div.
$(".header").next().not($content).hide();
//open up the content needed - toggle the slide- if visible, slide up, if not slidedown.
$content.toggle(500, function() {
//change text of header based on visibility of content div
$header.text(function() {
//change text based on condition
return $content.is(":visible") ? "Collapse" : "Expand";
});
});
});
.container {
width: 100%;
border: 1px solid #d3d3d3;
}
.container div {
width: 100%;
}
.container .header {
background-color: #d3d3d3;
padding: 2px;
cursor: pointer;
font-weight: bold;
}
.container .content {
display: none;
padding: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="header"><span>Expand</span>
</div>
<div class="content">
<ul>
<li>This is just some random content.</li>
<li>This is just some random content.</li>
<li>This is just some random content.</li>
<li>This is just some random content.</li>
</ul>
</div>
<div class="header"><span>Expand</span>
</div>
<div class="content">
<ul>
<li>This is just some random content.</li>
<li>This is just some random content.</li>
<li>This is just some random content.</li>
<li>This is just some random content.</li>
</ul>
</div>
<div class="header"><span>Expand</span>
</div>
<div class="content">
<ul>
<li>This is just some random content.</li>
<li>This is just some random content.</li>
<li>This is just some random content.</li>
<li>This is just some random content.</li>
</ul>
</div>
</div>
Try this
$(document).ready(function(){
$(".show").hide();
$(".Show15").click(function(){
$(".show").show();
});
$(".Show40").click(function(){
$(".show").hide();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div class="buttons">
<button class="buttonText Show15" width="200" height="300">DSL 6</button>
<button class="buttonText Show40" width="200" height="300">DSL 10</button>
</div>
<div class="show">
<div class="FifteenInfo border">
<h1 class="Package">DSL 6</h1>
<div class="cableSpacer"></div>
<h3 class="monthlyPrice">\$29.99</h3>
<div class="cableSpacer"></div>
<h3 class="differentbandwidth">\$39.99 Unlimited</h3>
</div>
<div class="FifteenSpecs">
<div class="monthlyUsage">
<h3 style="text-align: center;">Usage</h3>
<h1 class="Usage">150</h1>
<p class="Gigabyte">GB</p>
</div>
<div class="Download">
<h3 style="text-align: center;">Download</h3>
<h1 class="Usage" style="text-align: center;">6</h1>
<p class="Megabyte">Mbps</p>
</div>
<div class="Upload">
<h3 style="text-align: center;">Upload</h3>
<h1 class="Usage" style="text-align: center;">800</h1>
<p class="Megabyte">Kbps</p>
</div>
<div class="orderNow">
<button class="btn btntruespeed orderButton">Order Now!</button>
</div>
</div>
<div class="FourtyInfo border">
<h1 class="Package">DSL 10</h1>
<div class="cableSpacer"></div>
<h3 class="monthlyPrice">\$29.99</h3>
<div class="cableSpacer"></div>
<h3 class="differentbandwidth">\$44.99 Unlimited</h3>
</div>
<div class="FourtySpecs">
<div class="monthlyUsage">
<h3 style="text-align: center;">Usage</h3>
<h1 class="Usage">150</h1>
<p class="Gigabyte">GB</p>
</div>
<div class="Download">
<h3 style="text-align: center;">Download</h3>
<h1 class="Usage" style="text-align: center;">10</h1>
<p class="Megabyte">Mbps</p>
</div>
<div class="Upload">
<h3 style="text-align: center;">Upload</h3>
<h1 class="Usage" style="text-align: center;">1</h1>
<p class="Megabyte">Mbps</p>
</div>
<div class="orderNow">
<button class="btn btntruespeed orderButton">Order Now!</button>
</div>
</div></div>
You can create a wrapper function to hide all similar elements using class pattern selectors
Sample Code
$(".buttonText").click(function() {
hideAll();
var _showClass = $(this).attr("class").match(/Show.{2}/).pop();
switch (_showClass) {
case "Show15":
toggleSection("Fifteen", true);
break;
case "Show40":
toggleSection("Fourty", true);
break;
case "Show60":
toggleSection("Sixty", true);
break;
}
});
function toggleSection(group, show) {
var selector = "[class^=" + group + "]";
show ? $(selector).show() : $(selector).hide();
}
Sample Fiddle.
Note: This will hide all similar classes. Eg: toggleSection("Fourty", true) this will hide elements with FourtyInfo, FourtySpecs and Fourty...
If you have such case, I suggest you try something like this:
function toggleSection(group, show) {
var sections = ["Info", "Specs"];
var selector = sections.map(function(k) {
return "." + group + k
}).join();
show ? $(selector).show() : $(selector).hide();
}
This will have more control as you have specified which classes are to be used.
Sample Fiddle
Here is the shortest way .. works for all situations ..
script:
$(document).ready(function(){
// at the start..
$('body').children().first().addClass('show');
$('div').click(function(){
$(this).removeClass('show');
$(this).next().addClass('show');
});
// at the end ..
$('body').children().last().click(function(){
$('body').children().first().addClass('show');
});
});
in ur style add
div{
visibility: hidden;
}
.show{
visibility: visible;
}
Full code and working Demo Here
I have 4 divs with same Class and Id. What I am looking for is to remove display-none-class on that specific div whenever #button is clicked.
What I have done now is to give an additional class name to each div so they are more "recognizable" for jQuery.
Here is my code:
html
<div class="parentdiv">
<h3 id="button">remove class</h3>
<div class="display-none" id="element">
Show me on button click
</div>
</div>
jquery
$('h3#button').each(function(i){
$(this).addClass('remove-btn-' + (i+1));
});
$('div#element').each(function(i){
$(this).addClass('remove-this-' + (i+1));
});
So What I am looking for is to loop through remove-this-1, remove-this-2 etc and remove display-none class when ever remove-btn-1, remove-btn-2 etc is clicked.
Use one more class to the div which has display-none class
give same class to each button
wrap them in a parent them
use this to achieve your goal
Whenever you click on the button, it will look for class box of current clicked the button. For demo purpose - I have applied CSS to display-none class, So that you can see changes.
$(document).ready(function(){
$('.button').click(function(){
$(this).prev('.box').removeClass('display-none');
});
});
.display-none {
display: inline-block;
padding: 5px;
background: tomato;
color: #fff;
border-radius: 3px;
}
.button {
display: inline-block;
padding: 5px;
background: steelblue;
color: #fff;
border-radius: 3px;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
<div class="display-none box">Lorem ispum 0...</div>
<p class="button">Remove Class</p>
</div>
<div class="parent">
<div class="display-none box">Lorem ispum 1...</div>
<p class="button">Remove Class</p>
</div>
<div class="parent">
<div class="display-none box">Lorem ispum 2...</div>
<p class="button">Remove Class</p>
</div>
<div class="parent">
<div class="display-none box">Lorem ispum 3...</div>
<p class="button">Remove Class</p>
</div>
Are you looking for something like this
$('.button').click(function(){
$(this).next().removeClass('display-none');
});
.display-none{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parentdiv">
<h3 class="button">remove class</h3>
<div class="display-none element">
Show me on button click 1
</div>
</div>
<div class="parentdiv">
<h3 class="button">remove class</h3>
<div class="display-none element">
Show me on button click 2
</div>
</div>
<div class="parentdiv">
<h3 class="button">remove class</h3>
<div class="display-none element">
Show me on button click 3
</div>
</div>
<div class="parentdiv">
<h3 class="button">remove class</h3>
<div class="display-none element">
Show me on button click 4
</div>
</div>
First of all the id (#) value has to be unique. I suggest you creating unique ids.
For removing a class from an element with jquery you can use the .removeClass('class_name')
I'm trying to filter divs by their class, but I'm having some trouble. For some reason, if any button is pressed, everything disappears. I've been troubleshooting this for a while now and I can't figure out why this is happening. A CodePen is here and my attempt is below:
HTML:
<button class="active btn" id="all">Show All</button>
<button class="btn" id="a">Show A</button>
<button class="btn" id="b">Show B</button>
<button class="btn" id="c">Show C</button>
<button class="btn" id="d">Show D</button>
<br />
<div class="a b">a & b</div>
<div class="a">a</div>
<div class="b">b</div>
<div class="c">c</div>
<div class="d">d</div>
CSS:
div {
background: #eee;
height: 100px;
width: calc(25% - 10px);
float: left;
margin: 5px;
text-align: center;
}
.active {
color: red;
}
jQuery:
$( document ).ready(function() {
$("#all").click(function() {
$("div").fadeIn(500);
$("#all").addClass("active");
$(":not(#all)").removeClass("active");
});
$("#a").click(function() {
$(".a").fadeIn(500);
$(":not(.a)").fadeOut(0);
$("#a").addClass("active");
$(":not(#a)").removeClass("active");
});
$("#b").click(function() {
$(".b").fadeIn(500);
$(":not(.b)").fadeOut(0);
$("#b").addClass("active");
$(":not(#b)").removeClass("active");
});
$("#c").click(function() {
$(".c").fadeIn(500);
$(":not(.c)").fadeOut(0);
$("#c").addClass("active");
$(":not(#c)").removeClass("active");
});
$("#d").click(function() {
$(".d").fadeIn(500);
$(":not(.d)").fadeOut(0);
$("#d").addClass("active");
$(":not(#d)").removeClass("active");
});
});
It is because of the selector $(":not(.b)") which selects all elements and hides it except .b which will include the body element also.
You need to use a more specific selector, one option is to use a container element like
var $btns = $('.btn').click(function() {
if (this.id == 'all') {
$('#ct > div').show();
} else {
var $el = $('.' + this.id).show();
$('#ct > div').not($el).hide();
}
$btns.removeClass('active');
$(this).addClass('active');
})
.active {
color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button class="active btn" id="all">Show All</button>
<button class="btn" id="a">Show A</button>
<button class="btn" id="b">Show B</button>
<button class="btn" id="c">Show C</button>
<button class="btn" id="d">Show D</button>
<br />
<div id="ct">
<div class="a b">a & b</div>
<div class="a">a</div>
<div class="b">b</div>
<div class="c">c</div>
<div class="d">d</div>
</div>
Using a common selector like an element selector div also may not work as it could target other non related elements, so another option is to use a common class to all elements that need to be targeted.
var $items = $('.item');
var $btns = $('.btn').click(function() {
if (this.id == 'all') {
$items.show();
} else {
var $el = $('.' + this.id).show();
$items.not($el).hide();
}
$btns.removeClass('active');
$(this).addClass('active');
})
.active {
color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button class="active btn" id="all">Show All</button>
<button class="btn" id="a">Show A</button>
<button class="btn" id="b">Show B</button>
<button class="btn" id="c">Show C</button>
<button class="btn" id="d">Show D</button>
<br />
<div class="item a b">a & b</div>
<div class="item a">a</div>
<div class="item b">b</div>
<div class="item c">c</div>
<div class="item d">d</div>
Note: Also as you can see, there is no need to write separate click handlers for each button - given that the id of the button and the class you are looking for is the same.
The problem is this selector, for example:
:not(.d)
...will select everything that doesn't have class .d, including the body and all the buttons, etc. Restricting it more, like:
div:not(.d)
...should work. See my fix: http://codepen.io/anon/pen/cyhIK
sorting table content based on class name
May be it will help some one:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
$("table tbody tr").sort(function (a, b){
return $("td", b).attr("class") < $("td", a).attr("class") ? 1 : -1;
}).appendTo('table tbody');
sort table row values based on class name:
<table>
<thead>
<th>A column</th>
</thead>
<tbody>
<tr>
<td class="x">A</td>
</tr>
<tr>
<td class="c">B</td>
</tr>
<tr>
<td class="">C</td>
</tr>
</tbody>
</table>