3

Main Question: Is it possible to use a JavaScript conditional and then use some jQuery code?

Here is a currently non-working example:

<script>
//<![CDATA[ 
if (location.pathname == "/SearchResults.asp" 
|| location.pathname.indexOf("-s/") != -1 
|| location.pathname.indexOf("_s/") != -1) 
$('.colors_productname span').css("background-color", "#F7F7F7");
//]]> 
</script>

The JavaScript conditional was provided by my ecommerce platform (Volusion) to target just category pages (the jQuery was my doing). I asked them if this JavaScript code would still work given that my urls dont include "/SearchResults.asp" (One of them is actually "/Meats-s/3393.htm"), but they assured me that it should still work.

Secondary Question: What do the "location.pathname.indexOf" lines do?

2
  • 15
    JQuery is javascript. Commented Jul 10, 2013 at 23:01
  • 2
    The second question is the answer to your first one :) Commented Jul 10, 2013 at 23:01

5 Answers 5

12

While you can mix then, it is important to understand that jQuery and native Javascript refer to DOM elements differently.

Assume you have a document with an element like this:

<span id="message_location"><span>

To get that element in regular Javascript would be:

var spanElement = document.getElementById("message_location");

However, with the jQuery library you would use this syntax:

var $spanElement = $("#message_location");

Here you must be aware that spanElement and $spanElement are not the same thing. One is a DOM element and the other is an array cum jQuery object that holds one value -- the span element.

When going back and forth from the jQuery library and regular Javascript, it is very easy to get confused as to what you are really referring to.

(Personally, any time I have a jQuery reference to a DOM element, I always start the variable name with a $. It keeps my life simple...)

Sign up to request clarification or add additional context in comments.

2 Comments

could you tell me what this code does? var div = document.createElement('div'); if(className) div.className = className; var $div = $(div); return $div;
Better to ask a new question as a question than in comments.
6

jQuery and JavaScript are not separate languages. jQuery is a library written in Javascript, so any valid jQuery statement is a valid JavaScript statement.

Q2: location.pathname is the path of the url after your domain name.

e.g http://www.google.com/s/goo.html -> the pathname would return s/goo.html

So your if condition is trying to find out if this string contains the substring "-s".

1 Comment

Great, thank you :) So it SHOULD work, because "/Meats-s/" has a "-s/". However, I guess as a follow up question would be: why isn't it working then? Should I post a new question entirely so I can provide more code?
0

You can absolutely mix them.

The location.pathname.indexOf is searching the current URL for an instance of "_s/" or "-s/". If the URL does not contain those characters (or if it equals "/SearchResults.asp"), your jquery code is run.

Comments

0

You should be able to mix the two freely, be careful of using JQuery selectors vs regular Javascript dom elements though, the two are not always the same. (ie. class, multiple selectors.)

Comments

0

jQuery is just a javascript object that provide usefull methods. So yes, you can use vanilla js and jQuery together.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.