We Keep Coding

Javascript - get child of child

How can I set the innner html of a span element in dom that is under li>a>?
<li class="first">
<a>
<span aria-hidden="true">1</span>
</a>
</li>
I have tried something like this, but nothing was written:
element[i].childNodes[1].children.innerHTML = number;

children is an HTMLCollection. innerHTML only applies to HTML elements. You need to find the HTML element in the children before using innerHTML.
It doesn't make a lot of sense to mix the use of childNodes and children. Use the former for more compatibility across browsers, use the latter for a simpler approach that lets you consider only element nodes.
var li = document.querySelector("li");
var number = 13;
li.children[0].children[0].innerHTML = number;
<ul>
<li class="first">
<a>
<span aria-hidden="true">1</span>
</a>
</li>
</ul>
Alternatively, you could just use querySelector:
var li = document.querySelector("li");
var number = 13;
li.querySelector("a").innerHTML = number;
<ul>
<li class="first">
<a>
<span aria-hidden="true">1</span>
</a>
</li>
</ul>

I recommend using jQuery (http://jquery.com)
and then use can simply do
$('li > a > span').html('THE INNER HTML HERE');
or
$('li > a').find('span').html('THE INNER HTML HERE');
you can use .first() to the result of find() function to get the first element

How to get specific element javascript based on style

I need to acces an element that has a certain style.
This is my structure
<ul>
<li> Hi </li>
<li> bye </li>
<li> third one </li>
</ul>
The list items are placed on top of each other (last one first) and I can dislike something or like something. Once I do that, it gets a style display:none like following:
<ul>
<li> Hi </li>
<li> bye </li>
<li style:"display:none;"> third one </li>
</ul>
Now after I did that I want to be able to acces the last element that does not have display:none, (the bye) how can I do this?
I was thinking of something in the form of:
var myId = $("#slider > ul li").last().attr("id");
But obviously I always get the ID of the item that is hidden since its still there.
Can I do something like select last where !display:hidden ?

Can I do something like select last where !display:hidden ?
Yes, with jQuery's :visible pseudo-class:
var myId = $("#slider > ul li:visible").last().attr("id");
(Note: Your li elements don't actually have id values, but that's a tweak.)
Live Example:
var listItem = $("#slider > ul li:visible").last();
$("<p>")
.text("Text of last visible item: " + listItem.text())
.appendTo(document.body);
<div id="slider">
<ul>
<li>Hi</li>
<li>bye</li>
<li style="display:none;">third one</li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Can use ':visible' selector
var myId = $("#slider > ul li:visible").last().attr("id");

It should work using:
$("#slider > ul li:visible").last().attr("id");
https://api.jquery.com/visible-selector/

so your inline styling is a bit off it should be
<ul>
<li> Hi </li>
<li> bye </li>
<li style="display:none;"> third one </li>
</ul>
You could do a few different things, best is probably just iterate through and check for where display = none, then go to the previous element:
$('ul').children().each(function(e) {
if($(this)[0].style.display == 'none') {
console.log($(this).prev());
}
})

Determine what number li element a div is in

Say I have:
<ul>
<li></li>
<li>
<div id="test"></div>
</li>
<li></li>
</ul>
Is there a way to tell from the div tag what number li tag it's in?
I.e. in the div there is a javascript function that returns 2 since it's inside the second li element.
I realise I could go:
get parent ul
check each li child until the div is found.
Is there a more elegant way to do this?

You can use different variations of jQuery index()
$('li').index( $('li:has(div)') );
or
$('li:has(div)').index();
demo

You could use jQuery .find(); something like :
<ul class="level-1">
<li class="item-i">I</li>
<li class="item-ii">II
<div class="text">this is the div</div>
</li>
<li class="item-c">C</li>
<li class="item-iii">III</li>
</ul>
$("ul.level-1").find( "div" ).css( "background-color", "yellow" );
Depends what you need ...

You can use .index() to get the index of the li, since index is zero based add 1 to it to get 2
var $div = $('#test')
var index = $div.parent().index() + 1

Find <li> tag by its child tag <a> href value

How to find Li tag which has a child tag by its Href value. By this I need to set class for that li tag.
My HTML
<div id="tabs" class="tab_wrapper">
<ul class="nav nav-tabs">
<li>Subject
</li>
<li>Contract
</li>
<li>Neighborhood
</li>
<li>Site
</li>
<li>Improvements
</li>
<li>Supplemental Data
</li>
</ul>
</div>
Css
.Active
{
color:red;
}
For example I have to set class "Active" for li tag which has href value "#tabNeighbourhood", so that li tag will be like
<li class="active">Neighborhood
</li>

Using :has() selector:
$('li:has(a[href="#tabNeighbourhood"])').addClass('active');
This will add class active to any LI containing anchor with specific href attribute.

Use .parent() :
$("ul.nav > li").removeClass("active"); // Clear all li's class attributes.
$("a[href='#tabNeighborhood']").parent().addClass("active"); // Add active to neighborhood.

$('li', '#tabs')
.filter(function() {
return !! $(this).find('a[href="#tabNeighbourhood"]').length;
})
.addClass('active');
I refer you to the official docs for explanation of the single parts.

Try Below Code
$(document).ready(function(){
$('body').find('a').each(function(){
if($(this).attr('href')=="#tabNeighbourhood"){
$(this).closest('li').addClass("Active");
}
});
});

Using your HTML structure you can use an immediate children selector >, has selector and a selector on href attribute.
Code:
$('#tabs>ul>li:has(a[href="#tabNeighbourhood"])').addClass('active');
Demo: http://jsfiddle.net/swvzot7f/

Try it by yourself. Here is an algorithm if you consider it too complex:
Search for needed <a> by attribute.
Select the parent of <a> that was found.
Add class to that parent.
Answer is pretty simple, so I do think it is much more important to show you the way of thinking instead of feeding with ready made-up solution.
EDIT
Just in case you fail I decided to add a solution too:
$( "a[href='NEEDED HREF TO SEARCH']" ).parent().addClass('active');

Another option, You can achieve by CSS alone:
a[href$='#tabNeighbourhood']
{
color:red;
}
Fiddle
JQuery method (using :has() selector):
$('ul li:has(a[href="#tabNeighbourhood"])').addClass('Active');
Fiddle

The following code (vanilla js :-) shows you how to add a class to an HTML element which ha specific href value. Just enter in the field the href value you want to search, it will add a class active, example try: #tabSubject or #tabImprovements. I hope it is what you need.
function setActive(){
var elm = document.getElementsByName('findElm')[0],
searchElm = elm.value,
targetStr = 'a[href*="' + searchElm + '"]',
target = document.querySelector(targetStr);
target.classList.add('Active');
}
.Active
{
color:red;
}
<div id="tabs" class="tab_wrapper">
<ul class="nav nav-tabs">
<li>Subject
</li>
<li>Contract
</li>
<li>Neighborhood
</li>
<li>Site
</li>
<li>Improvements
</li>
<li>Supplemental Data
</li>
</ul>
</div>
<input type="text" name="findElm" value="#tabImprovements"><br>
<input type="submit" value="Search" name="submit" onclick="setActive();">

css: Use the nth-child concept(Best Practice)
.tab_wrapper ul :nth-child(3) a {
color:red;
}

jquery css get child from a div

I have a div which contains :
<div class="ms-core-deltaSuiteLinks" id="DeltaSuiteLinks">
<div id="suiteLinksBox">
<ul class="ms-core-suiteLinkList">
<li class="ms-core-suiteLink">
<a class="ms-core-suiteLink-a" id="ctl00_ctl56_ctl03_ShellNewsfeed" href="http://my.nbsdev.co.uk:80/default.aspx"> <span>Newsfeed</span>
</a>
</li>
<li class="ms-core-suiteLink">
<a class="ms-core-suiteLink-a" id="ctl00_ctl56_ctl03_ShellDocuments" href="http://my.nbsdev.co.uk/personal/dah/Documents/Forms/All.aspx"> <span>OneDrive</span>
</a>
</li>
<li class="ms-core-suiteLink">
<a class="ms-core-suiteLink-a" id="ctl00_ctl56_ctl03_ShellSites" href="http://my.nbsdev.co.uk/personal/dah/Social/Sites.aspx"> <span>Sites<span class="ms-suitenav-caratBox" id="Suite_ActiveLinkIndicator_Clip">
<img class="ms-suitenav-caratIcon" id="Suite_ActiveLinkIndicator" src="/_layouts/15/images/spcommon.png?rev=23">
</span></span>
</a>
</li>
</ul>
</div>
</div>
I want to get from this the li elements and then only select the 1st and second li elements and hide them
I've had a go myself with $('#DeltaSuiteLinks').children('li:first').css('visibility' , 'hidden'); but this doesn't work. Where am i going wrong?

li is not immediate child of DeltaSuiteLinks. Use .find() instead of .children()
Use
$('#DeltaSuiteLinks').find('li:first').css('visibility' , 'hidden');

As mentioned in comments, children() only selects direct childs.
You can use find() instead for selecting all matching descendants and target the first and second <li> alone using the :lt() selector
$('#DeltaSuiteLinks').find('li:lt(2)').css('visibility' , 'hidden');

You can do this in CSS alone:
ul li:nth-child(-n+2){
display: none;
}
Example fiddle
The caveat of this being the lack of support in IE8 and lower.

Another solution would be :
var li = $('#DeltaSuiteLinks').find('li');
li.eq(1).hide();
li.eq(2).hide();