We Keep Coding

Using jQuery, how to specify with the `.attr` method, the second of two html classes?

When using jQuery and are using the .attr method as follows:
$(document).ready(function(){
$('.class1').click(function(){
id = $(this).attr('.class2');
});
});
Say I have the following HTML for the above function:
<div class="class1 $class2"></div>
The second class is attributed at runtime, so I have 10 divs, each with class1, but several with class2. Then I wish to use the jQuery function at the top, so that whenever I click on any of the divs, it applies the specific class2 of that div, to the variable ID.
I hope this makes more sense.

Since your class2 comes from your PHP code, you seem to hit the usecase of data-attributes.
With data-attributes you can easily have some extra data (often used for javascript purposes) on your HTML elements without having to use special classes or ids for that.
It works like that:
<span data-hero="batman">I'm a Bat!</span>
Where in your Javascript (using jQuery) you get the value of it by simply doing:
$('span').data('hero');
Refer to the MDN and the jQuery documentation for further information.

Is this what you're trying to do?
$(document).ready(function(){
$('.class1').click(function(){
var id = $(this).attr('class').replace('class1','').trim();
});
});

If you have a multi class tag this mean the HTML code would be like this:
<sometag class="class1 class2">...</sometag>
I think the simplest approach is to do some string operations on the class attribute of the tag:
var class2 = $(selector).attr("class").split(" ")[1];
OR you can write a simple jQuery plugin to do the work for you:
(function($){
$.fn.secondClass = function(){
var c = this.attr("class").split(" ");
if(c.length >= 2)
return c[1];
};
}(jQuery))
Usage: var class2 = $(selector).secondClass();
Hope this helps.

Check special values from an element

Is it possible to read a value from an element like this for ie
<div id="element" winner="first"></div>
So i can get the "first" value from winner?
Thanks in advance

You can, but you should use data attributes to store custom data:
<div id="element" data-winner="first"></div>
Now, you can use the .data() method:
$('#element').data('winner'); // "first"
If you can't use data attributes, you can use the .attr() method:
$('#element').attr('winner'); // "first"

var winner = $("#element").attr('winner');
If you have control over the markup, I would suggest not to make up your own attributes. Instead, use HTML5 data-* attributes.

Change outerHTML in javascript

$(editor[i])[0].outerHTML has a value of:
<p style="color: red;" data-mce-style="color: red;">some string</p>
I want data-mce-style="color: red;" to disappear.
I'm doing that like this:
$(editor[i])[0].outerHTML.replace('data-mce-style="color: red;"', '');
But it's not replacing it.

.replace creates a new transformed string; it does not alter the original variable. You're simply creating a new string and not storing the new string back into outerHTML, like:
$(editor[i])[0].outerHTML = $(editor[i])[0].outerHTML.replace('data-mce-style="color: red;"', '');
However, this only solves your immediate problem -- there are vastly better ways to accomplish what you need than stringifying and re-parsing your <p> element. Since you're using jQuery, the most obvious way would be to use the removeAttr method:
$(editor[i]).removeAttr('data-mce-style')​;​

Try:
$(editor[i]).removeAttr('data-mce-style')
http://api.jquery.com/removeAttr/
Of course this will apply to all elements in your selector. If you just want to apply this to element 0 then use:
$(editor[i]).first().removeAttr('data-mce-style')

element.setAttribute(attr, null)
or
element.removeAttribute
No need for outerHTML and replace. Note that replacing HTML will remove event listeners (other than attribute event handlers).

$(editor[i]).removeAttr('data-mce-style')​;​
FIDDLE

Try to use jQuery removeData():
$(editor[i]).removeData('mce-style');

you need to change/remove a particular attribute, for that you need to use
$(editor[i]).removeAttr('data-mce-style');
for more info check the following links:
http://api.jquery.com/removeAttr/
if you need to change the value of a particular attribute then do:
attr(attributeName, value);
for more info about the same check the following link:
http://api.jquery.com/attr/

jQuery .find() with an iD

JS:
this.par = $(this).find("p");
HTML:
<p></p>
The problem is that I dont want to find p tag, but rather a div with a specific ID like this one below.
<div id="abc"></div>

Use the ID selector:
var myDivObj = $("#abc");
Take a look at the list of jQuery selectors.
Additional Information:
It's difficult to tell by your code what you're trying to do, but based on what you've posted, there is no reason to use $(this). The ID selector alone should meet your needs.

Well, you can just use the id selector:
$(this).find('#abc');
Since ids should be unique on the page, you may as well just use it as the constructor:
$('#abc');
If this isn't exactly the same, you're doing something wrong.

this.par = $(this).find("#abc");

You don't want to do that. Don't add properties to the html elements. This is better:
var par = $(this).find('#idOfElement')
Storing the result in this.par is a very bad idea, since this refers to a DomElement.
What you might be looking for is jQuery .data():
$(this).data('par', $(this).find('#idOfElement'))
Which allows you to associate #idOfElement with this.

use id selector
this.par = $(this).find("#abc");
but id is uniqe you can remove $(this).find and use this code
this.par = $("#abc");

How to execute partial find on dynamic HTML5 data descriptor?

I have a series of images tagged with HTML5 data descriptor "data-type2=[x]" where x is a number of different elements.
e.g.
<img data-type2="pants" class="element" src="#>
I am trying to pass that data field into a jquery function that finds classes in another div (<div class="outfit-list") that has child divs tagged with classes such as:
<div class="pants-001">
<div class="pants-002">
<div class="shoes-001">
etc.
Here is where I am stumped: how do I write a jquery function that accesses data type2 from the item I click (e.g. data-type2="pants"), finds all other divs under .outfit-list with classes that have, for example, "pants" in their class name "pants-002", and hide them? The function I have below does not work - I suspect that's because it's looking for the full name and not partial.
How do I make it perform a partial search to locate the classes that contain the term from data-type2?
<script type="text/javascript">
$(document).ready(function(){
$('.thumbslist .element').click(function(){
$('.outfit-list').find('.'+$(this).data('type2')).hide();
});
});
</script>

You can use the attribute contains selector, [attribute*="value"].
$('.outfit-list').find('[class*="' + $(this).data('type2') + '"]').hide();

You can use the starts with selector. Something like
$(".thumbslist .element").click(function() {
var type2 = $(this).data("type2");
$(".outfit-list").find("div[class^=" + type2 + "]").hide();
});

This plugin adds support for data selectors: http://plugins.jquery.com/project/dataSelector

First of all, the jQuery .data() method is amazing: http://api.jquery.com/data/
You could do:
$("#img1").data('type', 'pants')
// Or whatever else you need to attach data to. You can do this dynamically too!
t = $("#img1").data('type')
// Recall that data at some point
$("div").each(function() {
pat = new RegExp(t)
if ($(this).attr('class').search(pat) !== -1) {
$(this).hide()
}
});
Or even better in Coffeescript
t = $("#img1").data 'type'
$("div").each ->
if ($(#).attr('class').search new RegExp t) isnt -1 then $(#).hide()

May be with something like in this other question
jQuery selector regular expressions

You could just grab the value of the attribute then use it in an attribute selector: http://jsfiddle.net/n73fC/1/