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>
Related
say i have a list
<ul class="ul-1">
<li class="li-1">xx -1</li>
<li class="li-2">xx -2</li>
<li class="li-3">xx -3</li>
</ul>
i then save it as
var list = $('.ul-1').html();
i can populate another element i.e
$('.ul-2').html(list);
but what if I wanted to replace the first list element <li class="li-1">xx -1</li> with another list element, how do I do this using the list variable? thanks
Firstly note that it's generally better practice to work with references to the elements in the DOM rather than serialising them to strings which need to be deserialised again when re-added to the DOM.
In addition, if you work with the li references you can use jQuery to retrieve the first() of them and then replaceWith() to change it as necessary. Try this:
var $list = $('.ul-1 > li');
$list.appendTo('.ul-2');
$list.first().replaceWith('<li>Foobar</li>');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="ul-1">
<li class="li-1">xx -1</li>
<li class="li-2">xx -2</li>
<li class="li-3">xx -3</li>
</ul>
<ul class="ul-2"></ul>
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,
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','#');
Is there a way to search elements based on data attributes?
I have the following code and would like to know how can this be achieved
<UL>
<LI data-relation_id=1/>
<LI data-relation_id=1/>
<LI data-relation_id=1/>
<LI data-relation_id=2/>
<LI data-relation_id=2/>
<LI data-relation_id=2/>
<LI data-relation_id=3/>
<LI data-relation_id=3/>
<LI data-relation_id=3/>
</UL>
On a click event I basically want to find out all the items that belong to a specific data-relation?
function getRelatedObjects(relationId){
//Search all the li's and get the LI
//that have the data-relation_id== relationId
}
Can this be done using jquery?
The data attribute is just an attribute, so you can use the attribute selector.
$('li[data-relation_id='+relationId+']')
You can't search by associated data specifically, but if the data is set by attribute then you can search using the attribute selector:
function getRelatedObjects(relationId){
return $('li[data-relation_id="'+relationId+'"]');
}
JSFiddle
I need to get every element with a specific id, get the parent of the object, and set its ID.
How would I do this?
I have this code:
<li id="edge_top"> </li>
<!-- Menu Items Here -->
<li id="not_selected"><a id="selection_link" href="index.htm">Home</a></li>
<li id="not_selected"><a id="selection_link" href="page1.htm">Subitem 1</a></li>
<li id="not_selected"><a id="selection_link" href="page2.htm">Subitem 2</a></li>
<!-- Menu Items End Here -->
<li id="edge_bottom"> </li>
I need to find all the anchor elements with the id "selection_link", get the parent (the "list item" element [li]) and set its ID to "selected". How would I do this with jQuery? I'll be using the conditioning to determine if the li element will actually be allowed to get the new ID. (if the URL matches the href property of the anchor element).
HTML specification specifies that an ID should only be applied to 1 element. You can't have more then one element with the same ID.
In this case, it's better to use classes.
TO select by class:
$(".classname")...
EDIT: An example based on your code:
<li class="edge_top"> </li>
<!-- Menu Items Here -->
<li class="not_selected"><a class="selection_link" href="index.htm">Home</a></li>
<li class="not_selected"><a class="selection_link" href="page1.htm">Subitem 1</a></li>
<li class="not_selected"><a class="selection_link" href="page2.htm">Subitem 2</a></li>
<!-- Menu Items End Here -->
<li class="edge_bottom"> </li>
<script type="text/javascript">
$(document).ready(function(){
$(".selection_link").parent().removeClass("not_selected").addClass("selected")
});
</script>
You need to use classes for that. In HTML you not allowed to use ID's multiple times.
The id attribute should be unique across your XHTML document, so this question is not really valid.
Although this may work if you really insist:
$("[id=xx]")
$('li a').each(function(){
if ($(window).attr('location').href.match($(this).attr('href'))) {
//example with class
$(this).parent().addClass('selected');
// example with id
$(this).parent().attr('id', 'selected');
}
});