Develop Reference

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);
});

Adding links to jQuery tabs

I'm working on a project for my JavaScript class, and I don't know how to edit this jQuery where when you select a tab, it will bring you to a new page. I try adding "a href" to the body, but it doesn't look right. Is there a piece of code I have to enter in the jQuery so when you choose "About" that it will bring you to the actual page? Here's the code:
jQuery
function handleEvent(e) {
var el = $(e.target);
if (e.type == "mouseover" || e.type == "mouseout") {
if (el.hasClass("tabStrip-tab") && !el.hasClass("tabStrip-tab-click")) {
el.toggleClass("tabStrip-tab-hover");
}
}
if (e.type == "click") {
if (el.hasClass("tabStrip-tab-hover")) {
var id = e.target.id;
var num = id.substr(id.lastIndexOf("-") + 1);
if (currentNum != num) {
deactivateTab();
el.toggleClass("tabStrip-tab-hover")
.toggleClass("tabStrip-tab-click");
showDescription(num);
currentNum = num;
}
}
}
}
function deactivateTab() {
var descEl = $("#tabStrip-desc-" + currentNum);
if (descEl.length > 0) {
descEl.remove();
$("#tabStrip-tab-" + currentNum).toggleClass("tabStrip-tab-click");
}
}
$(document).bind("click mouseover mouseout", handleEvent);
HTML
<div class="tabStrip">
<div id="tabStrip-tab-1" class="tabStrip-tab">Home</div>
<div id="tabStrip-tab-2" class="tabStrip-tab">About</div>
<div id="tabStrip-tab-3" class="tabStrip-tab">Contact</div>
<div id="tabStrip-tab-3" class="tabStrip-tab">Gallery</div>
</div>

add this to your handler if you need a new page..
window.open('url', 'window name', 'window settings');
or this if you want to redirect the actual view
window.location.href('url');
furthermore this should be a better choice:
$('div[id^=tabStrip-tab]').bind("click mouseover mouseout", handleEvent);
now only the 'tabStrip-*' id´s will trigger the events/handler

The best solution for your problem is to put hidden div with content for every tab you have.
All you have to do is display the current div depending which tag is selected. The another solution is using ajax and then you have a template for the content and you fill the template with the data you have received.

Using the id for if condition

What is the correct way of addressing the id of an element in an if statement condition?
if($('id').val() == Reset)
var Submit_Status = $("#Reset").val();
else
var Submit_Status = $("#Nb_var97").val();
Thanks,
Neil P.

Since I can't see your HTML I'm going to post a simple example:
<div id="myID"></div>
if($("div").attr("id") == "myID")
{
//do stuff
}

if($('someSelector').attr('id') == 'Reset')
var Submit_Status = $("#Reset").val();
else
var Submit_Status = $("#Nb_var97").val();

if ( $('div').attr('id') == 'Reset' ) {
// do something
}

If you're trying to check the value of the ID property then you can get it using the attr method.
For example, if you were looping through all of the elements with the class foo and wanted to check for the id bar you could do this in your loops:
...
var id = item.attr("id");
if(id == 'bar')
{
}
Here's an example where all divs on the page are selected and each one has it's ID checked in turn:
var divs = $('div');
divs.each(function(index, value) {
var id = $(value).attr('id');
if(id == 'foo')
{
// Do foo work
}
else if(id == 'bar')
{
// Do bar work
}
Working example: http://jsfiddle.net/gZHMD/1/

Using a short form (ternary/conditional operator) instead of if
// element could be any html element but inputs have val and div, spans and suchlike don't have val
var Submit_Status = $('element').attr('id') == 'Reset' ? $("#Reset").val() : $("#Nb_var97").val();
Also, if you have multiple elements, then you have to select specific one, an example here.

function to remove empty <p> removes <p>'s with content

ive made a function that should remove a p-element if it doesnt have any content or has a br inside itself, when leaving after contenteditable. The problem is that it removes an li that HAS content aswell when .blur() !?
Im going nuts because im sure it worked 10min ago.........
here's the function:
$('p').live('blur', function() {
localStorage.setItem('todo', listan.innerHTML);
color();
if ($(this).html() == "" || "<br>")
{
console.log($(this).html());
$(this).parent().remove();
localStorage.setItem('todo', listan.innerHTML);
}
});
the list ("listan") looks like this:
<ul ID="listan">
<li><p contenteditable="true" class="thing">something</p><input type="button" value="ta bort" class="delete"></li>
</ul>

Remove .parent() from the code, since the parent element of "blurring" p is li. Also check your if statement.
$('p').live('blur', function() {
localStorage.setItem('todo', listan.innerHTML);
color();
var html = $(this).html();
if (html == "" || html == "<br>") {
console.log($(this).html());
$(this).remove();
localStorage.setItem('todo', listan.innerHTML);
}
});​

if( $(this).html() == "" || "<br>")
What this line is saying is "if the html is empty, or if <br> is something".
So it's always true, so no matter what the content is it gets removed.
Try this:
if( $(this).html().replace(/\s|<br ?\/?>/) == "")
This will strip out spaces (most importantly leading and trailing) and line breaks and see if the result is empty.

var html = $(this).html();
if (html == "" || html == "<br>") {....do stuff....}

Why not use CSS?
p:empty {
display: none
}

Showing a div element dependent on if it has content

With jQuery I am trying to determine whether or not <div> has content in it or, if it does then I want do nothing, but if doesn't then I want to add display:none to it or .hide(). Below is what I have come up with,
if ($('#left-content:contains("")').length <= 0) {
$("#left-content").css({'display':'none'});
}
This does not work at all, if the div has not content then it just shows up anyway, can any offer any advice?

Just use the :empty filter in your selectors.
$('#left-content:empty').hide();

if( $( "#left-content" ).html().length == 0 ) {
$( "#left-content" ).hide();
}

try to remove first whitespaces:
// first remove whitespaces
// html objects content version:
var content = $.trim($("#left-content).html()).length;
if(content == 0) {
$("#left-content).hide();
}
// html RAW content version:
var content = $.trim($("#left-content).html()); // <-- same but without length
if(content == "") { // <-- this == ""
$("#left-content).hide();
}