Attach href to a class individually - javascript

So I want to use Javascript to add three different href links to a class of 3 < li >
However I can't really get it to work properly.
I'm sorry for my short explanation and poor english, but I really don't know how to explain it any better.
I have googled away searching for a solution, but I can only find how to do it when you're not using a class.
HTML
<li class="navigation">HTML</li>
<li class="navigation">DOM</li>
<li class="navigation">Javascript</li>
</ul>
JS
var links = document.getElementsByClassName("navigation");
links[0].setAttribute('href', 'www.google.se');
I want to take the class named navigation and add an href link to the < li >.

The li element doesn't have an href attribute. It's a list item, not an anchor.
You can use document.createElement to create an a element, then move the text node inside the list item into it, then append the a element to the li element, then add an href attribute to it.
const listitems = document.querySelectorAll('li');
Object.values(listitems).forEach(item => {
const text = item.firstChild;
const link = document.createElement('a');
link.setAttribute("href", "http://google.com");
item.appendChild(link);
link.appendChild(text);
});
<ul>
<li class="navigation">HTML</li>
<li class="navigation">DOM</li>
<li class="navigation">Javascript</li>
</ul>

the li text, dont have click effect, so you add the link tag <a></a>
var links = document.getElementsByClassName("navigation");
links[0].setAttribute('href', 'www.google.se'); //edit the url
links[1].setAttribute('href', 'www.google.se');
links[2].setAttribute('href', 'www.google.se');
<ul>
<li ><a class="navigation">HTML</a></li>
<li ><a class="navigation">DOM</a></li>
<li ><a class="navigation">Javascript<a/></li>
</ul>

var link1 = document.getElementsByClassName("navigation1");
var link2 = document.getElementsByClassName("navigation2");
var link3 = document.getElementsByClassName("navigation3");
link1[0].setAttribute('href', 'www.google.com');
link2[0].setAttribute('href', 'www.yahoo.com');
link3[0].setAttribute('href', 'www.test.com');
<ul>
<li>
<a class="navigation1">HTML</a>
</li>
<li>
<a class="navigation2">DOM</a>
</li>
<li>
<a class="navigation3">Javascript</a>
</li>
</ul>

Related

How can I select the first specific inner element?

Here is my HTML?
<ul>
<li>
<a href="./link1">
<div>something</div>
<span>link</span>
</a>
</li>
</ul>
And this is my jQuery code:
$('li').on('click', function(){
var link = $(this).find('a').attr('href');
})
As you see, there is two <a> tags. And .find() refersh to both of them. While I just want to select the <a> which is right inside (one level) in the <li> tag. So expected result is ./link.
What alternative should I use instead of .find() ?
You can use the direct descendant selector.
$('li').on('click', function(){ var link = $(this).find('> a').attr('href'); })
Try with eq(0) .It will get the first a tag
Or
Do with first('a')
$(this).children().first('a').attr('href')
$('li').click(function(){
console.log($(this).children('a').eq(0).attr('href'))
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>click
<a href="./link1">
<div>something</div>
<span>link</span>
</a>
</li>
</ul>
Method 1: Using Jquery's children and first
$('#myList').on('click', function() {
var link = $('#myList').children('a').first();
console.log(link.attr('href'));
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<ul>
<li id="myList">
<a href="./link1">
<div>something</div>
<span>link</span>
</a>
</li>
</ul>
Method 2: Using the immediate children selector >
$('#myList').on('click', function() {
var link = $('li > a:first');
console.log(link.attr("href"));
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<ul>
<li id="myList">
<a href="./link1">
<div>something</div>
<span>link</span>
</a>
</li>
</ul>
the first specific element
What alternative should I use instead of .find() ?
$(this).find('a:first')
seems like only logical solution and easy to read by developer
Don't do so. How is the browser meant to know which link to follow? It'd be invalid HTML
I suggest you using this instead:
startmiddleend
As you can see start and end are linked to page1 but the middle points to page2.

How to insert a anchor tag into list item with Javascript?

I have one list item which have a class name in html5
<li class="navi"> HOME </li>
that list item I want to insert a anchor tag via class name in javascript. anchor is here:
HTML
how can i do this to be:
**<li class="navi"><a href="#HOME" >HOM E</a> </li>**
pure vanilla javascript:
function makelink() {
var li = document.getElementsByClassName('navi')[0];
li.innerHTML = 'HTML';
}
<ul>
<li class="navi"> HOME </li>
</ul>
<button onclick="makelink()">click here to make HOME link</button>
Try this
$(document).ready(function(){
$("ul").append("<li class='navi'><a href='#HOME' >HOM E</a></li>")
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<ul>
<li class="navi"> HOME </li>
</ul>
If you're using jQuery, you can do this:
$li = $('li.navi');
$li.html("<a href='#"+ $li.text() +"'>"+ $li.text() +"</a>");
Without complete code example showing what you are attempting, we are guessing. But you could try:
$('.navi').append('HOME');
Document.createElement and Node.appendChild
var listItem = document.querySelector('navi');
var name = listItem.innerText;
var anchor = document.createElement('a');
var anchor.href = "#"+name;
var anchor.innerText = name;
listItem.appendChild(newNode);

Nested parent data value according to child's data in jQuery

I am trying to get value from anchor attribute (parent data-dir_r) according to anchor (child data-dir_r). Its returning null all the time.
Here is my html and jQuery ::
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<ul class="ul-element">
<li class="li-element">
<a class="anchor" href="#" data-dir_r="143"> Parent</a>
<ul class="ul-element">
<li class="li-element">
<a class="anchor" href="#" data-dir_r="100"> Child </a>
</li>
</ul>
</li>
</ul>
Click here
<script>
$("a.click-here").click(function(event){
var number = 100;
var child = $("ul li a.anchor").filter("[data-dir_r='" + number + "']");
var prent = child.find("li a.anchor").data("dir_r");
console.log(prent);
});
</script>
Requirement :
when I click on the anchor Click here then it will match child data-dir_r=100 in the list
according to data-dir_r=100 it will find parent upper (parent li anchor) anchor data-dir_r value
Output will be 143
Error:
now its returning null
jsFiddle sample
Thanks in advance
You've to use closest() or parents() instead of find in :
var prent = child.find("li a.anchor").data("dir_r");
And give you li parent a class (parent in my example), so it should be :
var prent = child.closest("li.parent").find('a.anchor').data("dir_r");
//Or
var prent = child.parents("li.parent").find('a.anchor').data("dir_r");
So it will go up from the child to the parent li a.anchor then get the data desired.
NOTE : If you don't want or you can't add class you could use :
var prent = child.closest("ul:first>li").find('a.anchor').data("dir_r");
Hope this helps.
$("a.click-here").click(function(event){
var number = 100;
var child = $("ul li a.anchor").filter("[data-dir_r='" + number + "']");
var prent = child.closest("li.parent").find('a.anchor').data("dir_r");
console.log(prent);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="ul-element">
<li class="li-element parent">
<a class="anchor" href="#" data-dir_r="143"> Parent</a>
<ul class="ul-element">
<li class="li-element">
<a class="anchor" href="#" data-dir_r="100"> Child </a>
</li>
</ul>
</li>
</ul>
Click here

active state menu javascript

I'm having trouble to setup the active state for my menu using URL recognition. What I'm looking to achieve is having the <a href=""> to change to <a id="active" href =""> if you're on the page it links to. This what I have done so far and it seems not working.
Let me know if you have any idea and thanks all for your help!
$(function(){
var url = window.location.href;
var page = url.substr(url.lastIndexOf('/')+1);
$('.ActiveMenu a[href*="'+page+'"]');
$(this).attr({ id: 'active'});});
<ul id="menu">
<li id="Link1" class="ActiveMenu">Link 1</li>
<li id="Link2" class="ActiveMenu">Link 2</li>
<li id="Link3" class="ActiveMenu">Link 3</li>
</ul>
so the issue is that your function doesn't know what $(this) is. Instead, you should set target to the correct element and then add a class to it. You shouldn't use id because you should only have one id and it should be a unique identifier, not a state. Class is better suited for it. Let me know if this works for you! :)
DEMO
$(function(){
var url = window.location.href;
var page = url.substr(url.lastIndexOf('/')+1);
target = $('.ActiveMenu a[href*="'+page+'"]');
$(target).addClass('active');
});
<ul id="menu">
<li id="Link1" class="ActiveMenu">Link 1</li>
<li id="Link2" class="ActiveMenu">Link 2</li>
<li id="Link3" class="ActiveMenu">Link 3</li>
</ul>
Please add/change the class name instead of Id
$(function(){
var url = window.location.href;
var page = url.substr(url.lastIndexOf('/')+1);
var currentPage=$('.ActiveMenu a[href*="'+page+'"]');
currentPage.addClass('active');
});
please use
$(this).attr("id","active");

Find child of parent container using jquery

I am probably looking at this the wrong way, but I am having trouble locating an element within my page and am hoping someone can help.
The scenario is this:
I have a <ul> containing a number of <li>'s which in turn contain <a href>'s. I am getting the value of the rel attribute of the clicked <a href> and want to replace the text in a <span class='someclass'> which is located in a parent container. There may be more than one of these <span class='someclass'> on the page so I need to find the closest one.
Here is how my HTML looks
<h3 class="my-header-class">
<span class="some-class">Title Text</span>
</h3>
<ul class="tabs">
<li><a rel="Title Text 1" href="#tab1">Link 1</a></li>
<li><a rel="Title Text 2" href="#tab2">Link 2</a></li>
<li><a rel="Title Text 3" href="#tab3">Link 3</a></li>
</ul>
Here is my javascript
var titletext = $(this).attr('rel');
var container = $(this).parent().children(".some-class");
container.text(titletext);
The titletext variable is being set with the correct text but I am unable to replace the text of the <span class='someclass'>. I assume because I am not finding it correctly.
Thanks,
Tristan
$(this).parent().parent().prev().children(".some-class");
<h3> <!-- PREV OF UL -->
<span> <!-- CHILDREN OF H3 -->
<ul> <!-- PARENT OF <LI> AND <A> -->
<li> <!-- PARENT OF <A> AND CHILDREN OF <UL> -->
<a> <!-- CHILDREN OF <UL> AND <LI> -->
$(this).parent().parent().prev('h3').children(".some-class")
$("ul.tabs a").click(function() {
var titletext = $(this).attr('rel');
$(this).closest("ul.tabs").prev().find(".some-class").text(titletext);
});
Working example: http://jsfiddle.net/peeter/67vTV/

Categories

Resources