Develop Reference

JavaScript if-elseif-statement

In PHP, the different if-elseif-scenarios rule each other out, right? I am a little confused, I don't seem to figure out why this is not the case in JavaScript here. Can anybody tell me how to simplify this?
(This statement is connected to radio-buttons and is supposed to style the selected radio button differently. However, when I do not include all the remove-parts, clicking one and then another one leaves me with both of them styled as "selected")
$("#item-upload-form input").on("change", function() {
var hello = $("input[name='category_select']:checked", "#item-upload-form").val();
if(hello == 1){
$("#handy").addClass("selected");
$("#pc").removeClass("selected");
$("#notebook").removeClass("selected");
} else if (hello == 2){
$("#pc").addClass("selected");
$("#handy").removeClass("selected");
$("#notebook").removeClass("selected");
} else if (hello == 3){
$("#notebook").addClass("selected");
$("#pc").removeClass("selected");
$("#handy").removeClass("selected");
}
});

I think #Katana314 had the right answer to the question you're asking. Javascript isn't refreshing the page on each call so the class will stay on the element until you remove it. Might be a little cleaner this way...
$("#item-upload-form input").on("change", function() {
var hello = $("input[name='category_select']:checked", "#item-upload-form").val();
// find any element that has the selected class and remove it
$('.selected').removeClass('selected');
// then add it to which ever element needs it.
if(hello == 1){
$("#handy").addClass("selected");
} else if (hello == 2){
$("#pc").addClass("selected");
} else if (hello == 3){
$("#notebook").addClass("selected");
}
});

Because you're using two selectors and checking hello with the value will only work for those whose both value returns the same value. If both selector value results in different values then your condition never match.
So, it will only match if both values are the same.

Let's keep only calls to addClass(). The code would look like this:
if(hello == 1){
$("#handy").addClass("selected");
} else if (hello == 2){
$("#pc").addClass("selected");
} else if (hello == 3){
$("#notebook").addClass("selected");
}
What happens when you click on radio buttons?
R: Each time it will run only ONE branch. Successive clicks will only addClass to current element, and maintain classes of previous elements.

Why not let jQuery do all of the work for you - this way you can add/remove selections without updating your code:
$("#item-upload-form input").on("change", function (ele) {
$("#item-upload-form input").each(function( ) {
if ($(this).prop('checked')){
$(this).addClass("selected")
} else{
$(this).removeClass("selected") ;
}
});
});

To answer your question, yes, if-else-blocks will stop evaluating if a match is found.
Suggestion 1:
Try using === instead of ==.
=== checks both if the value and type are the same.
== 1 will pass as true for many things, including '1' == 1 and true == 1. I don't know what hello actually is, but you might be getting a false positive.
Suggestion 2:
Here is a revised code suggestion (instead of if-else blocks)
$("#handy").toggleClass("selected", (hello === 1));
$("#pc").toggleClass("selected", (hello === 2));
$("#notebook").toggleClass("selected", (hello === 3));

Utilizing jQuery Selectors to simplify HTML parser code

This code uses jQuery find() and several if statements to pick out certain text from an HTML document.
I'm trying to remove the if statements and interpret them to jQuery selectors in find(), at the very top line of code. Is this possible? If so, what would the selectors need to be?
$(document).find("a[href^='http://fakeURL.com/']").each(function()
{
var title = $(this).text();
var url = $(this).attr('href');
if(title.indexOf('Re: ') != 0)
{
if($(this).parent().attr('class') != 'quoteheader')
{
if(url.indexOf('topic') == 36)
{
if($(this).parent().attr('class') == 'middletext')
{
console.log(title);
}
}
}
}
});

For the last thing I left, you want to check if the topic is at index 36 ? not sure its possible via the selector, beside that everything went up to the selector (code not tested, should work tho)
$(document).find(".middletext:not(.quoteheader) > a[href^='http://fakeURL.com/']").each(function()
{
if(url.indexOf('topic') != 36)
return;
var title = $(this).text();
if(title.indexOf('Re: ') != 0)
return;
console.log(title);
});

What is the best way cross-browser to trim an element innerHTML?

What is the best way cross-browser to trim an element innerHTML?
jsFiddle: http://jsfiddle.net/6hk8z/

I am assuming you are getting confused with the html code that is not whitespace but merely rendered as such by the browser. See customised implementation below:
String.prototype.trimmed = function(){
return this.replace(
/^(\s| |<br\s*\/?>)+?|(\s| |<br\s*\/?>)+?$/ig, ' '
).trim();
}
updated jsFiddle

Use the DOM, not innerHTML which you would need to parse.
function trimContents(element) {
function iterate(start, sibling, reg) {
for(var next, c = element[start]; c != null; c=next) {
next = c[sibling];
if (c.nodeType == 1 && c.nodeName.toLowerCase() == "br"
|| c.nodeType == 3 && !(c.nodeValue = c.nodeValue.replace(reg, "")))
element.removeChild(c);
else
break;
}
}
iterate("firstChild", "nextSibling", /^\s+/);
iterate("lastChild", "previousSibling", /\s+$/);
}
(demo at jsfiddle.net)

Have you tried jQuery's $.trim()? See jQuery documentation for more details.

Trying to execute a if/else statement in JQuery

I'm trying to execute a simple JQuery code a.k.a an if/else statement. Here's my code:
$('#butt_click, #pary').click(function() {
if ($(this).attr('id').val() == "butt_click") {
alert("You clicked button");
} else {
alert("You clicked pary");
}
});
The code above doesn't work AT ALL. Can't seem to find the problem... Help would be appreciated. Thanks..

This doesn’t look right:
$(this).attr('id').val()
Try using $(this).attr('id') or simply this.id instead (if you are trying to access the id property from the clicked element).

You have wrong code.
code must be as below.
if ($(this).val() == "butt_click")
OR
if ($(this).attr('id') == "butt_click")
not
if ($(this).attr('id').val() == "butt_click")

Remove val(). $(this).attr('id') already returns value
if ($(this).attr('id') == "butt_click") {

Remove .val() from if statement
Change your if statement to
if ($(this).attr('id') == "butt_click") {
alert("You clicked button");
} else {
alert("You clicked pary");
}

jQuery - Check if the tag's content is equal to sometext then do something

Let's say I have many of these in my content div : <cite class="fn">blabla</cite>
How can I check every cite tag's content (in this case: blabla) with class fn to see if it equals to "sometext" then change it's color to red ?
Very simple.

$('cite.fn:contains(blabla)').css('color', 'red');
Edit: though that will match "blablablabla" as well.
$('cite.fn').each(function () {
if ($(this).text() == 'blabla') {
$(this).css('color', 'red');
}
});
That should be more accurate.
Edit: Actually, I think bazmegakapa's solution is more elegant:
$('cite.fn').filter(function () {
return $(this).text() == 'blabla';
}).css('color', 'red');;

You can make use of the amazing .filter() method. It can take a function as its parameter, which will reduce the jQuery collection's elements to those that pass its test (for which the function returns true). After that you can easily run commands on the remaining elements:
var searchText = 'blabla';
$('cite.fn').filter(function () {
return $(this).text() === searchText;
}).css('color', 'red');
jsFiddle Demo

You could potentially do something like:
$('cite.fn').each(function() {
var el = $(this);
if (el.text() === 'sometext') {
el.css({ 'color' : 'red' });
}
});
This fires a function against each cite that has the class fn. That function checks if the current cite's value is equal to 'sometext'.
If it is, then we change the CSS color (text-color) property to red.
Note I'm using jQuery in this example, as you've specifically tagged your question jQuery. Ignore the downvote, this was applied before I edited a typo that I'd made (el.val() rather than el.text())

Without jQuery:
var elms = document.querySelectorAll("cite.fn"), l = elms.length, i;
for( i=0; i<l; i++) {
if( (elms[i].innerText || elms[i].textContent) == "blabla") {
elms[i].style.color = "red";
}
}