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.
<ul>
<a href="#Project">
<li onclick="project()">Projects</li>
</a>
</ul>
a tab appears and you can click on it, which runs a javascript function and also changes the url to www.demo.com#Project.
Is it possible when i give someone the link like www.demo.com#Project it loads the page and automatically runs function project()
EDIT SOLUTION
if(window.location.hash == "#Project") {
setTimeout('project();', 1);
}
else {
}
a timeout must be set so it loads the page first then execute function
No, script won't run if your give someone the URL. To achive this you should check whether window.location.hash equals '#Project' on page load.
Hope this helps
Btw. what Praveen Kumar mentioned is changing your code as follow:
<ul>
<li onclick="project()">
Projects
</li>
</ul>
I assume you want this to work on several different anchors, so you could do something like this:
<ul>
<li onclick="project()">
Projects
</li>
</ul>
<script>
function project() {
alert('Function project called')
};
var elements = document.querySelectorAll("a[href='" + window.location.hash + "']")
if (elements.length > 0)
{
elements[0].click();
};
</script>
This code will make sure any hash anchor gets clicked when you navigate to the url with that hash.
the link will be for example "www.test.com#myproject"
and "function project" will be run automatically
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<script>
function project()
{
alert("hello");
}
</script>
</head>
<body>
<div id="myproject">
<img src="test.jpg" onload="project()">
<a> sample text</a>
<p>123456789</p>
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</div>
</body>
</html>
A small example
If (window.location.hash === '#Project') {
project() ;
}
Yes it is possible. You dont have to do <a href="#Project">
<li onclick="project()">Projects</li>
</a> because it is a painful code. Try to do this:
`<ul>
<li>
Projects
</li>
</ul>`
It basically run the function called project() when you click the Projects. Base on your code your just navigating an element that has an id of Project.
You can also use
<ul>
<li>
Projects
</li>
</ul>
Then in projects.html run your script:
<script>
function project(){
alert("I am your function.");
}
project(); //Call the function
</script>
I use the AngularJs to fetch the data from mySql database for my navigation bar on HTML5. The problem is I cannot open the link in the sub menu.
Here is my code :
<div id="header-wrapper" class="wrapper">
<div ng-app="myApp" ng-controller="customersCtrl" id="header">
<div id="logo">
<h1>Why Choose a Breeder ?</h1>
<p>Quality Quarantee Knowledge</p>
</div>
<nav id="nav">
<ul>
<li class="current">Home</li>
<li>Holland Lops
<ul>
<li>Bucks</li>
<li>Does</li>
<li>Junior</li>
</ul>
</li>
<li>For Sale</li>
<li>Article
<ul><li ng-repeat="menu in menues">{{menu.Title}}</li></ul>
</li>
<li>Contact us</li>
</ul>
</nav>
</div>
However I cannot open the link in this code (When I click on link, nothing happens):
<ul><li ng-repeat="menu in menues">{{menu.Title}}</li></ul>
But If I remove the ul like this :
<li>For Sale</li>
<li>Article</li>
<li ng-repeat="menu in menues">{{menu.Title}}</li>
I can open the link. I don't know what's wrong. Is it because the order of the navigation bar ? Could you please suggest me, what I'm wrong ?
This is my .js code :
var app = angular.module('myApp', []);
app.controller('customersCtrl', ['$scope','$http',function($scope, $http){
$scope.menues = [];
$http.get("http://www.rhosgobelrabbit.com/getUrl.php")
.then(function (data) {$scope.menues = data.data.records;
}, function (error) {
alert('Error');
});
}]);
You need to use ng-href instead of href. You can read about this in the angularJS docs: Docs
<ul><li ng-repeat="menu in menues"><a ng-href="{{menu.Link}}" target="_self">{{menu.Title}}</a></li></ul>
As long as the ng- aren't placed infront of the href will angular just give you a 404.
I have a list of photographs being generated like the following snippet. Basically this would render a table like structure, with each photo being like a cell in this table. The ID of each photo like for example 1D means that the photo is in the first row of the table and in the 4th/D column.
<ul>
<li class="row">
<ul>
<li class="photo" id="photo-1A">1A</li>
<li class="photo" id="photo-1B">1B</li>
<li class="photo" id="photo-1C">1C</li>
<li class="photo" id="photo-1D">1D</li>
<li class="photo" id="photo-2A">2A</li>
<li class="photo" id="photo-2B">2B</li>
<li class="photo" id="photo-2C">2C</li>
<li class="photo" id="photo-2D">2D</li>
<li class="photo" id="photo-3A">3A</li>
<li class="photo" id="photo-3B">3B</li>
<li class="photo" id="photo-3C">3C</li>
<li class="photo" id="photo-3D">3D</li>
</ul>
</li>
</ul>
I have a JSON which includes whether the photo is available or not. Basically the JSON string is something along these lines:
[{"row":1,"position":"A","available":true},{"row":1,"position":"B","available":false},{"row":1,"position":"C","available":false},{"row":1,"position":"D","available":false},{"row":2,"position":"A","available":true},{"row":2,"position":"B","available":false},{"row":2,"position":"C","available":false},{"row":2,"position":"D","available":false},{"row":3,"position":"A","available":true},{"row":3,"position":"B","available":false},{"row":3,"position":"C","available":false},{"row":3,"position":"D","available":false}]
Now basically what I need to do is to parse this JSON string and when any of these photos have "available:true" in the JSON string, I add a class photo-available in the HTML. I am new to angular and I am not sure if there is an easy way to assign a class to the available photos. Would be glad if someone can tell me what to use or how to do it.
Edit: Angular Code is this:
<ul class="table-rows">
<li class="photo-row" ng:repeat="photo in photos" ng:class="'photo-' + photo.row + photo.position">
<ul class="table-photos">
<li class="photo photo-available" ng:class="selectedOrNot(photo)" ng:init="photo.selected = false" ng:click="photo.selected = !photo.selected">
<div class="photo-number">{{photo.row + photo.position}}</div>
</li>
</ul>
</li>
<div class="clear"></div>
Update3
The reason you are unable to restore previous selections is that you are overwriting the photo's selected property with ng-init:
ng:init="photo.selected = false"
ng-class="{'selected': photo.selected, 'available': photo.available}"
When you combine these two, the 'selected' class will never be added because photo.selected has been hardcoded to false. You just need to remove ng-init, and the previous selection will trigger ng-class to add the correct class.
Here is a working demo: http://plnkr.co/tVdhRilaFfcn55h6mogu
Original answer
If the list of photos is not the same array as the list of available photos, you can use a directive to add the class.
app.directive('availablePhoto', function($filter) {
return {
restrict: 'A',
scope: true,
link: function(scope, element, attr) {
var id = attr.id
var regex = /photo-(.)(.)/g;
var match = regex.exec(id);
var row = match[1]
var position = match[2]
var photo = $filter('filter')(scope.photos, {row:row, position:position}, false)
console.log(photo);
if (photo[0].available) {
element.addClass('available');
}
}
}
});
Then attach it to each list item like this:
<li class="photo" id="photo-1A" available-photo>1A</li>
Here is a demo: http://plnkr.co/WJCmLf2M39fcUnvOPyNA
Update1
Based on your update, I see that there is just one array populating the list, and it contains the available flag. Therefore, you don't need a custom directive - ngClass will work. Here it is integrated into your code sample:
<ul class="table-rows">
<li class="photo-row" ng:repeat="photo in photos" ng:class="'photo-' + photo.row + photo.position">
<ul class="table-photos">
<li class="photo" ng-class="{'available': photo.available}" ng:init="photo.selected = false" ng:click="photo.selected = !photo.selected">
<div class="photo-number">{{photo.row + photo.position}}
</div>
</li>
</ul>
</li>
<div class="clear"></div>
</ul>
I have update the plunker to demonstrate this.
http://plnkr.co/WJCmLf2M39fcUnvOPyNA
Update2
Since you need ngClass to add multiple classes, use it like this:
ng-class="{'selected': photo.selected, 'available': photo.available}"
Demonstration of selected + available: http://plnkr.co/WJCmLf2M39fcUnvOPyNA
Here's a plnkr with an example of how to solve your problem. You need to
make use of both the ng-repeat and the ng-class:
http://plnkr.co/edit/hk68qp4yhEjcvOkzmIuL?p=preview
As you can see, I also added some filters for your photos, they will come handy if you need to just show the available ones (for some reason).
Here's the documentation for angular $filter service
I think this meets all your requirements:
$scope.photos = JSON.parse('[{"row":1,"position":"A","available":true},{"row":1,"position":"B","available":false},{"row":1,"position":"C","available":false},{"row":1,"position":"D","available":false},{"row":2,"position":"A","available":true},{"row":2,"position":"B","available":false},{"row":2,"position":"C","available":false},{"row":2,"position":"D","available":false},{"row":3,"position":"A","available":true},{"row":3,"position":"B","available":false},{"row":3,"position":"C","available":false},{"row":3,"position":"D","available":false}]');
and then you can just use ng-repeat to build the list:
<ul>
<li class="row">
<ul>
<li ng-repeat="photo in photos" class="photo" ng-class="{'photo-available': photo.available}" id="photo-{{photo.row}}{{photo.position}}">{{photo.row}}{{photo.position}}</li>
</ul>
</li>
</ul>
So what we are doing is we are taking our photo array, and for every one (ng-repeat="photo in photos") we are assigning that specific item to the variable photo. Then, if photo.available is true, we assign the class photo-available (ng-class="{'photo-available': photo.available}").
Then, we can simply interpolate the id and text based off the properties row and position ({{photo.row}}{{photo.position}}). You could also have done that like this {{photo.row + photo.position}} but that could cause issues if they were both numbers.
http://plnkr.co/edit/hBkoyHVtIwF60MKDF84j?p=preview
I have a label in navigational breadcrumb:
<li>Eligibility</li>
Please keep in mind, i am very new learning .NET.
On this page there is iFrame content, where you click a link to view the respective content:
<ul id="ss-categories" >
<li class="eligibility">
<a href="#" onclick="ChangeFrame('mem_eligibility.aspx');")>Eligibility</a href>
</li>
<li class="deductible">
<a href="#" onclick="ChangeFrame('mem_deductible.aspx');")>Deductible</a href>
</li>
<li class="claims"><a href="#" onclick="ChangeFrame('mem_claims.aspx');")>Claims & EOBs</a href>
</li>
<li class="benefits">
<a href="#" onclick="ChangeFrame('mem_benefits.aspx');")>Benefits</a href>
</li>
<li class="hospital">
<a href="#" onclick="ChangeFrame('mem_priorAuth.aspx');")>Hospital Admissions</a href>
</li>
<li class="priorauth">
<a href="#" onclick="ChangeFrame('mem_Inpatient.aspx');")>Prior Authorizations</a href>
</li>
And the iFrame displays the content based on the link you click:
<iframe id="ctl00_middleContent_frame1" style="float:left" scrolling="auto" frameborder="0" height="400" width="100%" src="mem_eligibility.aspx">
In that navigational breakcrumb at the top, how would i code it so that it will change, based on the section of content displayed in the iFrame.
i.e. (in lehmans terms)
if iFrame src="mem_elibigility.aspx" {
document.write = 'Eligibility'
}
if iFrame src="mem_deductible.asps" {
document.write = 'Deductible'
}
Hope that makes sense, and yes i know my code is complete garbage... and is not structured right, but thats not my job at the moment...
Updated Version:
The following stores the urls that control your iFrame as title attributes and it uses jQuery to set the title of your "header" area. I tried to clean up a bit of the code as well, but this should work for exactly what you need:
jQuery (Example):
$(document).ready(function(){
$('#ss-categories li').click(function()
{
var test = $(this).text();
$("#title").text(test);
//Code to change iframe based on property of the item clicked goes here
var title = $(this).attr("title");
$('#ctl00_middleContent_frame1').attr('src', title);
});
});
HTML (Example):
<ul id="ss-categories" >
<li class="eligibility" title="mem_eligibility.aspx">
Eligibility
</li>
<li class="deductible" title="mem_deductible.aspx">
Deductible
</li>
<li class="claims" title="mem_claims.aspx">
Claims & EOBs
</li>
<li class="benefits" title="mem_benefits.aspx">
Benefits
</li>
<li class="hospital" title="mem_priorAuth.aspx">
Hospital Admissions
</li>
<li class="priorauth" title="mem_Inpatient.aspx">
Prior Authorizations
</li>
<li id="title" style="font-size: x-large; font-weight: bold">Eligibility</li>
<iframe id="ctl00_middleContent_frame1" style="float:left" scrolling="auto" frameborder="0" height="400" width="100%" src="http://www.google.com">
Try this demo to see if that is the functionality you want : Updated Demo
Older answer:
Is something like this demo what you are looking for?
Code:
$(document).ready(function(){
$('#ss-categories li').click(function()
{
var test = $(this).text();
$("#title").text(test);
//Insert logic here to change iFrame based on clicked item
});
});
It creates a function that will grab the "name" of one of your links in the list and it will display that in your "title" area. If I understood you correctly - I think this will do what you need.