I have the following HTML for consideration...
<ul class="foo">
<li class="bar"><a>Here #1</a></li>
<li class="bar">Here #2</li>
<li class="bar">Here #3</li>
<li class="bar">Here #4</li>
</ul>
The problem is that I have an anchor tag that does not have an href in the first list item tag. I want to use JQuery to add the href to the tag. I tried doing it like this (it did not work):
var fooBar;
fooBar = $('li.bar').children().first();
fooBar.attr('a', 'href="#1"');
I thought maybe I needed to pass in the index, but I figured the .first() would grab the correct element. Either way my code fails to do what I want.
I would greatly appreciate any direction and/or input.
Problem is this line
fooBar.attr('a', 'href="#1");
Do it as bellow
fooBar.attr('href', '#1');
Here is the correct way of setting attribute value:
fooBar.attr('href', "#1");
You can use like this
$('li.bar').children('a').first().attr('href', '#1');
var add_attr = $('.foo > li:first-child');
$(add_attr).find("a").attr('href','#');
Related
I'm having trouble getting <a href="#"> to follow the link when jQuery is activated.
<ul>
<li class="menuOption">Home</li>
<li class="menuOption">About</li>
</ul>
I looked at a few posts but they involve people trying to prevent a link being followed by using preventDefaults(); in the .js file. I'm not sure what my solution would be.
You Need to put the link text inside of the anchor tags. Right now, the a tag is empty and so therefore un-clickable.
Try this instead:
<ul>
<li class="menuOption">Home</li>
<li class="menuOption">About</li>
</ul>
There can be multiple ways to accomplish this :-
1. One way is to change your href to point to javascript:void(0) rather than #
so the code should be
<ul>
<li class="menuOption">Home</li>
<li class="menuOption">About</li>
</ul>
You must also return false from your jquery function if you have some url written and onclick is present
<ul>
<li class="menuOption">Home</li>
</ul>
Dont forgot to return false from your function
function somefun(){
return false;
}
Following is my HTML structure which includes script tag
<ul id="list">
<li class="item1">Item 1</li>
<li class="item2">Item 2</li>
<li class="item3">Item 3</li>
<script type='text/javascript' src="main.js"></script>
<li class="item4">Item 4</li>
</ul>
Following is my JS code to get the length of direct child
var directChild = document.getElementById('list').children;
console.log(directChild.length); // this gives me length as 5
If you're interested in reading the count of the <li> child elements which are fathered by the element with id list I guess this is as close as you'd get to doing it w/ vanilla javascript...
var liElements = document.getElementById('list').getElementsByTagName("li");
alert(liElements.length);
However I'd also strongly advise you (as many others have already advised you) to look into using jquery for DOM manipulation instead of plain old javascript...
If you want all the child elements WITHOUT any <script> tag elements this could come in handy (it doesn't filter <script> tags but it comes close by filtering out tags with the specific type attribute text/javascript which is used only by <script> tags ;))
var nodes = document.querySelectorAll('#list > *:not([type="text/javascript"])');
alert(nodes.length);
Let me know if this helps...
Just move your script tag out of the <ul>. It will make your code valid, more sensible, and will make it do what you want.
I acknowledge that if you are so insistent as to leave a <script> tag in a <ul> then the comment from #Pekka will solve your problem.
Because script tag is #list's child element.
Say I have this HTML:
<ul class="list-group" id="words">
<li class="list-group-item"><span class="badge">10</span>Apple</li>
<li class="list-group-item"><span class="badge">50</span>Banana</li>
<li class="list-group-item"><span class="badge">30</span>Carrot</li>
</ul>
I'm looking for a jQuery selector that will select a list item like Banana and then be able to edit its child badge to whatever value.
I was looking around and saw some very complex selectors involving contains (which isn't exact enough for me already) and lambda functions/loops spanning multiple lines and was wondering if there was a better way.
Fiddle Example.
You can use .data() like #dsh mentioned in comment, see the example below :
HTML :
<ul class="list-group" id="words">
<li class="list-group-item" data-text="Apple"><span class="badge">10</span>Apple</li>
<li class="list-group-item" data-text="Banana"><span class="badge">50</span>Banana</li>
<li class="list-group-item" data-text="Carrot"><span class="badge">30</span>Carrot</li>
</ul>
JS :
$( ".list-group-item[data-text='Banana'] .badge" ).text(); //50
Hope this helps.
$("li:contains(Banana)>.badge").text("whatever")
should be the proper selector for jQuery. However, you should try to avoid :contains() if you are not specific. The selector above has to search in every list element. If you only search in the given list use
$("#words>li:contains(Banana)>.badge").text("whatever")
instead or use data Attributes, as dsh has commented,
Ok, so i've got a list of usernames from the mysql database. But, i need the ID from the database so i was thinking something like this,
<li id='43'>Monica</li>
<li id='47'>Henrik</li>
<li id='77'>Eric</li>
But how can i get the ID from the list?
I would use something like the following:
<ul id="items-list">
<li id='member-43'>Monica</li>
<li id='member-47'>Henrik</li>
<li id='member-77'>Eric</li>
</ul>
then:
$('#items-list li').each(function() {
var id = $(this).attr('id').split('-')[1];
});
It was pointed out in the comments that as of HTML5 it's perfectly valid to start an id attribute with a number, but I'd still give preference to this method, especially if there are to be multiple lists on a page from different DB tables (ids still need to be unique). An id of 43 has no meaning to anyone, but member-43 is much more clear.
Have a normal javascript on click event for the list element as shown below:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
linkClicked = function (index) {
alert($('#myList li').get(index).id);
}
</script>
</head>
<body>
<ul id='myList'>
<li id='43' onclick="linkClicked($(this).index())">Monica</li>
<li id='47' onclick="linkClicked($(this).index())">Henrik</li>
<li id='77' onclick="linkClicked($(this).index())">Eric</li>
</ul>
</body>
</html>
This worked for me!
You could add a class with the same name to all of the list items
<li class="test" id='43'>Monica</li>
<li class="test" id='47'>Henrik</li>
<li class="test" id='77'>Eric</li>
Then you could use an on
$(".test").click(function(){
$(this).attr("id");
});
$('li').each(function(){
alert( $(this).attr('id') );
});
Try
$("li").eq(0).attr("id")
Substitute 0 by the index item of the list item you want to read the id of.
Do you actually want to do something with that id? There is too little data that you gave us.
If you want to administer users you would need something like this:
<ul id="deleteUsers">
<li id='user43'>Monica</li>
<li id='user47'>Henrik</li>
<li id='user77'>Eric</li>
</ul>
And than in jQuery override click event. roryf gave you good example.
You Can Use HTML5 Data Attribute in order to hold ID Data . Holding data in ID may give problem if you require to define id statically at some place so not an optimal solution You can check code below -
<li data-empid="A123" data-salary="120" class="datalist">Monica</li>
<li data-empid="A124" data-salary="121" class="datalist">Monica</li>
Access Data in Data Attribute in Jquery
<script type="text/javascript">
$( "li .datalist" ).click(function() {
$(this).data("salary")
});
</script>
I have a nested list like this:
<ul class="list">
<li class="list_item_type_1">
<ul class="list">
<li class="list_item_type_2">Unnested item</li>
</ul>
</li>
<li class="list_item_type_2">Unnested item</li>
</ul>
With jQuery I want to add a list item before all .list_item_type_2 in the first .list.
I write it like this:
$('.list:first').find('li.list_item_type_2:first').before('<li class="list_item_type_1">Nested list (...)</li>');
This won't work as intended because the script finds the first .list_item_type_2 in the second .list and appends the new code there instead.
How can I keep the search in the first ul and prevent it from entering underlying ul elements?
Cheers!
Firstly, I'd advise constructing HTML that way. Use jQuery to assemble the HTML. It takes care of escaping and all those other useful things:
$("<li></li>").addClass("list_item_type_1")
.text("Nested list (...)")
.prependTo("ul.list:first > li.list_item_type:first");
Also, always use a tag selector ("ul.list") over a naked class selector (".list") where possible. It's much faster on most browsers.
You were so close!
Instead of find(), which searches all descendants, use children(), which only searches children.
Test: http://jquery.nodnod.net/cases/723/run
Maybe try to combine the selector in one expression ?
$('.list:first > LI.list_item_type_2:first').before('<li class="list_item_type_1">Nested list (...)</li>');
The > selector does only match the direct children, as explained in the doc.