My ASPX code looks like this:
<ul id="userlist">
<a class="s-test">
<li>
<span id="userlistspan" class="tt-User" value="1">Cardiologist</span>
<span id="userlistspan1" class="tt-Userss">SPECIALITY</span>
</li>
</a>
<a class="s-test">
<li>
<span id="userlistspan" class="tt-User" value="2">Cardio</span>
<span id="userlistspan1" class="tt-Userss">SPECIALITY</span>
</li>
</a>
</ul>
The jQuery I have tried is like this:
$('#userlist li #userlistspan').click(function () {
$('#txtSearch').val($(this).text());
})
//here am getting text like Cardio
How can I get value like value=2 from that span?
Your HTML is completely invalid for several reasons:
you cannot have an a element as a direct child of a ul. The li must be the child element.
You have duplicate id attributes when the id should be unique in same document, use classes to group elements instead.
span elements do not have a value attribute, if you want to store custom data with an element, use the data-* attribute.
the a element must have either an href or name attribute, however their use in this case seems redundant so you can remove them.
You need to fix all those issues first:
<ul id="userlist">
<li>
<span class="userlistspan tt-User" data-value="1">Cardiologist</span>
<span class="userlistspan1 tt-Userss">SPECIALITY</span>
</li>
<li>
<span class="userlistspan tt-User" data-value="2">Cardio</span>
<span class="userlistspan1 tt-Userss">SPECIALITY</span>
</li>
</ul>
From there you can attach the click handler to the .userlistspan class, and use the this keyword to reference the element which raised the event. You can then use the data() method to get the data-value, like this:
$('#userlist li .userlistspan').click(function() {
var $span = $(this);
$('#txtSearch').val($span.text());
var value = $span.data('value'); // = 1 or 2, depending on which element you clicked.
})
Related
I have the following example code:
<ul class="name_of_class" id="TEST">
<li class="foo">1</li>
<li class="boo">2</li>
<li class="goo">3</li>
<ul>
When a specific <li> is selected, the class changes to whatever the name is, plus sortUp or sortDown.
Example:
<ul class="name_of_class" id="TEST">
<li class="foo">111</li>
<li class="boo sortDown">222</li>
<li class="goo">333</li>
<ul>
I am trying to get the value of the actual text inside the <li>, but I keep getting undefined.
var li = document.getElementById('TEST');
alert($('#TEST').filter('.sort').html());
I tried using different ways but no matter what I do I can't get the actual value, which in this case should be 222.
Any idea what I am doing wrong?
You can select the li with either sortUp or sortDown by using the [attribute*="value"] selector,
The [attribute*="value"] selector is used to select elements whose
attribute value contains a specified value.
const li = document.querySelector('[class*="sort"]');
console.log(li.textContent);
li.style.background = "red";
<ul class="name_of_class" id="TEST">
<li class="foo">111</li>
<li class="boo sortDown">222</li>
<li class="goo">333</li>
<ul>
See css attribute selectors
I'm not sure what the classes have to do with your requirement to get the text of the clicked li element. Just set up a click event handler on the ul and then in the handler, check the event target to ensure it was an li, then just get the text of the event target.
document.getElementById("TEST").addEventListener("click", function(evt){
if(evt.target.nodeName==="LI"){
alert(evt.target.textContent);
}
});
<ul class="name_of_class" id="TEST">
<li class="foo">1</li>
<li class="boo">2</li>
<li class="goo">3</li>
<ul>
Maybe you can try this:
alert($('#TEST').find('li[class^='sort']').html());
You will find a li element that has a class that starts with "sort".
You can see more of this selector here.
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
I am using simple jquery selector but unfortunately didn't get the required result.
my code is:
$(document).ready(function() {
var displayName = $('.divclass').find('ul').find('li:first').text();
if ($('.divclass').find('ul').find('li:selected').length) {
displayName = $('.divclass').find('ul').find('li:selected').text();
}
$('divclass').find('button').html(displayName);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="divclass">
<button data-toggle="dropdown" class="btn btn-primary dropdown-toggle" aria-expanded="true">
sometext
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>
sometext1
</li>
<li selected="selected">
sometext2
</li>
<li>
sometext3
</li>
</ul>
</div>
I called it on document.ready. It executes but did not give me the proper result, what I am doing wrong to select the li with selected attribute.
:selected has a specific meaning: An option element that is currently selected. Perhaps somewhat counter-intuitively, that selected state is not reflected in an attribute (just the default) and again, it only applies to option elements.
selected isn't a valid attribute for li elements. You could either use data-selected for your own flag attribute, or a class.
If you used data-selected, you'd use [data-selected] in the selector:
<li selected="selected">
...find('ul').find('li[data-selected]').length...
...and then add/remove the attribute as appropriate.
If you use a class instead, it's a class selector:
<li class="selected">
...find('ul').find('li.selected').length...
...and then you add/remove the class as appropriate.
here is my html, I'm trying to grab the value of 'link'
<li class="nav-parent nav-expanded">
<a>
<i class="licon-layers" aria-hidden="true"></i>
<span>Virtual Servers</span>
</a>
<ul id="vms" class="nav nav-children" style="">
<li value="0">
<a link="i-2-20-VM">puppet-srv2</a>
</li>
<li value="0">
<a link="i-2-18-VM">puppet-srv1</a>
</li>
<li value="0">
<a link="i-2-24-VM">testing</a>
</li>
</ul>
Here Is what I have tried so far, but it isn't working:
$("#vms").on("click", "li", function() {
var href = $(this).children('a').find('link').attr();
console.log(href);
});
I'm not sure what I'm doing wrong, your help is highly appreciated
You trying to find attribute link using .find('link') code. Since the child element already founded, then just capture it attribute using .attr(). Instead of that, try following code:
Change this:
var href = $(this).children('a').find('link').attr();
into
var href = $(this).children('a').attr('link');
or you can use code below also:
$("#vms").on("click", "li", function() {
var href = $(this).find('a').attr('link');
console.log(href);
});
AND i read your comment that sound :
I'm using that just to hold value of VM name
If so, you can add data attribute for user defined attribute like below :
<a data-link="i-2-20-VM">puppet-srv2</a>
Then to get it value, just use the .data() function like below:
var href = $(this).find('a').data('link');
So I've got 2 <ul> containers each with id's. Inside of them are a list of <li> elements.
The first <ul> is <ul id="coaches-list">. The second is <ul id="players-list">.
There are tags within each <li> that have an id called close (which is a link that I'm using as my selector), which will delete each <li> node once clicked. I'm trying to target each <ul> container to see where it is coming from.
My HTML is:
<!-- coaches box -->
<div class="box">
<div class="heading">
<h3 id="coaches-heading">Coaches</h3>
<a id="coaches" class="filter-align-right">clear all</a>
</div>
<ul id="coaches-list" class="list">
<li><span>Hue Jackson<a class="close"></a></span></li>
<li class="red"><span>Steve Mariuchi<a class="close"></a> </span></li>
</ul>
</div>
<!-- players box -->
<div class="box">
<div class="heading">
<h3 id="players-heading">Players</h3>
<a id="players" class="filter-align-right">clear all</a>
</div>
<ul id="players-list" class="list">
<li><span>Steve Young<a class="close"></a></span></li>
<li><span>Gary Plummer<a class="close"></a></span></li>
<li><span>Jerry Rice<a class="close"></a></span></li>
</ul>
</div>
My remove tag function in jQuery is:
function removeSingleTag() {
$(".close").click(function() {
var $currentId = $(".close").closest("ul").attr("id");
alert($currentId);
// find the closest li element and remove it
$(this).closest("li").fadeOut("normal", function() {
$(this).remove();
return;
});
});
}
Whenever I click on each specific tag, it's removing the proper one I clicked on, although when I'm alerting $currentId, if I have:
var $currentId = $(".close").closest("ul").attr("id");
It alerts 'coaches-list' when I'm clicking on a close selector in both <ul id="coaches-list" class="list"></ul> and <ul id="players-list" class="list"></ul>
If I change that to:
var $currentId = $(".close").parents("ul").attr("id");
It has the same behavior as above, but alerts 'players-list', instead.
So when using closest(), it's returning the very first <ul> id, but when using parents(), it's returning the very last <ul> id.
Anyone know what is going on with this whacky behavior?
It's expected behavior.
You should use:
var $currentId = $(this).closest("ul").attr("id");
$(this) points at the clicked .close.
$(".close") points at the first one found.
It's because you run that selector from click handler you should use this instead:
var $currentId = $(this).closest("ul").attr("id");
Try using this function to get the parent:
var $currentId = $(this).parents().first();
I've never used the .closest() function but according to jQuery what you have specified should work. Either way, try that out and tell me how it goes.
You also need to make it so that it selects the current element by using $(this)