Develop Reference

How to disable first link in dropdown menu (js)

I have a menu in my CMS which is controlled programatically and I don't have access to the code, the only thing I can add is js/jquery. I would like to disable the first element from the menu, ie replace the current href with #. I'm new to jquery and need some help. Here's a menu sample.
<nav class="main-nav">
<div class="shell">
<ul>
<li class="taphover">
Education & Training<i class="ico-arrow"></i>
<div class="dd">
<ul>
<li>Book a Field Trip</li>
<li>Educator Development</li>
<li>Specialized Student Programs
</li>
</ul>
</div>
</li>
</ul>
</div>
</nav>
I'd like to replace /education with #. Any ideas?

//select the first anchor where href="/education"
var anchor = $("a[href='/education']")[0];
//change the href of the anchor
anchor.attr('href') = "#";

find a:selected element from list using JQuery

I need to pick an ID tag with a selected element. I also need to consider I have nested <ul> with <li>. I will always have only one tag with element selected="selected". The JQuery I have provided is not working.
JQuery
$(".SortFilterMenu li").find("a:selected").attr("id");
HTML
<ul class="SortFilterMenu">
<li><a id="RecommendedSort" value="Recommended" class="sortLabelElement sortTag sortClickedEvent" selected="selected">Our Recommendation</a></li>
//rest of code here ..
What am I doing wrong.

The selected attribute is intended for <option> elements inside a <select> element. jQuery's pseudo-selector :selected is only intended to match <option> elements that have this attribute.
Nevertheless, it IS possible to select other HTML elements with a selected attribute that has value selected, by doing this :
$(".SortFilterMenu li").find("a[selected=selected]").attr("id"));
A demo :
alert($(".SortFilterMenu li").find("a[selected=selected]").attr("id"));
<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<ul class="SortFilterMenu">
<li><a id="RecommendedSort" value="Recommended" class="sortLabelElement sortTag sortClickedEvent" selected="selected">Our Recommendation</a></li>
<li><a id="AnotherSort" value="AnotherOne" class="sortLabelElement sortTag sortClickedEvent">Something else</a></li>
<li><a id="YetAnotherSort" value="YetAnotherOne" class="sortLabelElement sortTag sortClickedEvent">Something more</a></li>
</ul>
Note :
While value and selected are perfectly valid attributes for an <option> element, they aren't valid attributes for the <a> element. While browsers are supposed to ignore this, it's better to use only valid attributes. For custom attributes, it means that their name should start with data-.
So, just rename value as date-value and selected as date-selected, and you do have valid HTML :
alert($(".SortFilterMenu li").find("a[data-selected=selected]").attr("id"));
<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<ul class="SortFilterMenu">
<li><a id="RecommendedSort" data-value="Recommended" class="sortLabelElement sortTag sortClickedEvent" data-selected="selected">Our Recommendation</a></li>
<li><a id="AnotherSort" data-value="AnotherOne" class="sortLabelElement sortTag sortClickedEvent">Something else</a></li>
<li><a id="YetAnotherSort" data-value="YetAnotherOne" class="sortLabelElement sortTag sortClickedEvent">Something more</a></li>
</ul>

<option>s can be selected, <a>s cannot.
If you want to match invalid extendo-attributes, then you have to use an attribute selector.
a[selected]
You should use something else to indicate the state, such as a class.

Use a class instead of attribute.
Setting an attribute only on one element of a collection is more complicated than using classes that are simple to toggle
<li><a id="RecommendedSort" data-value="Recommended"
class="sortLabelElement sortTag sortClickedEvent selected">
Our Recommendation
</a>
</li>
Then selector is
$(".SortFilterMenu li a.selected").attr("id");

Get reference to object without a unique attribute

I'm trying to get the reference of this particular part of the page, then I can use the method click() on it. I was trying to use a CSS selector like this:
var customersMenu = $('input[translate=menu.customers]');
But no success until now. Can you help me anyway?
<ul class="menu">
<li ui-sref-active="active">
<a class="ng-scope" translate="menu.home" href="#/home">Home</a>
</li>
<li ui-sref-active="active">
<a class="ng-scope" ui-sref="customer.list" translate="menu.customers" href="#/customers">Customers</a>
</li>
</ul>

First of all, you might need to open up the menu to be able to click the menu item:
var menu = $("ul.menu"); // $ is a shortcut to element(by.css("selector"))
menu.click();
Then, the easiest way to locate the menu item would be "by link text":
menu.element(by.linkText("Home")).click();

Css attribute not changing (javascript)

I am trying to make a piece of code that will change the content of my webpage by clicking on links. It hides the div displayed now and replaces it with another one.
The html is this:
<ul>
<li> <a href="#" id="Overview_button" > Overview </a> </li>
<li> Backgrounds</li>
<li> Boxes </li>
<li><a href="#" id="Colors" > Colors</a> </li>
<li> Navigation</li>
<li> Positioning</li>
<li> Text </li>
<li> Conclusion </li>
</ul>
Right now the function is only applied to the second element since thats the one I am testing with. The id 'Backgrounds' refers to a div later in the text.
The javascript is:
var currentContent = 'Overview';
function changeContent(newContent) {
document.getElementById(currentContent).style.display = "none";
document.getElementByID(newContent).style.display = "block";
currentContent = newContent;
};
It succesfully hides the old content, but does not show the new.

document.getElementByID
Should be
document.getElementById
Anyway, you should check errors in your console before posting such questions.

How to expand an unordered list down to a certain link

I have a dynamically built unordered list like below, and I want to find a way to expand all the nodes above the link with a certain id once the list is loaded using jquery,
For example I might want to expand all the nodes required for the link with the id=1905 to be visiblem and leave all other nodes collapsed.
Hope this makes sense.
<div id="menu">
<ul>
<li><a class="inactive" href="#"><img src="images/folder.png">Baking</a>
<ul>
<li><a class="inactive" href="#">Bars</a>
<ul>
<li><a id="1905" class="rlink" href="url">Rasberry Crumb Breakfast Bars</a></li>
</ul>
</li>
</ul>
</li>
<li><a id="1803" class="rlink" href="url">text</a></li>
</ul>
</div>
So the list would initially load like this
And I would want to expand it like this

You could try going up the parent nodes of the element you want and activate them:
var parentList= $('#link1905').closest('ul');
while (parentList.length > 0) {
parentList.prev('a').removeClass('inactive'); /* and/or .addClass('active'); */
parentList = parentList.closest('ul');
}
Also you must start your element id's with a letter: What are valid values for the id attribute in HTML?