I have a list:
<ul id="list">
<li class="one">Item A</li>
<li class="one">Item B</li>
<li class="two">Item C</li>
<div id="pressed">Submit</div>
</ul>
and when "Submit" is pressed I want to retrieve the value of the list item which has a class of "two". In this instance, pressed Submit would return "Item C". Here's the jQuery I've tried:
$("#pressed").click(function() {
var v = $('#list').filter('.two').val();
alert(v);
});
But all this returns is 0. What's the best way to do this? Only one <li> will have a class of "two" at any one time.
Firstly, your HTML is invalid as div elements cannot be children of ul:
<ul id="list">
<li class="one">Item A</li>
<li class="one">Item B</li>
<li class="two">Item C</li>
</ul>
<div id="pressed">Submit</div>
Secondly, text() is the property you want, not val():
$("#pressed").click(function() {
var v = $('#list').find('.two').text();
alert(v);
});
Example fiddle
You need html() or text() instead of val(). The function val() is used for input elements like text, checkbox etc. Also put div outside ul to make your html valid as Rory McCrossan pointed
Live Demo
var v = $('#list').filter('.two').html();
After Rory McCrossan's correction with HTML you can do this.
$("#pressed").click(function() {
alert($('#list .two').text());
});
Related
Let's say that I have a nested <ul> that looks like this:
<ul>
<ul class="pizzatype">
<h1>Margherita</h1>
<li class="ingredient">Tomato sauce</li>
<li class="ingredient">Mozzarella</li>
<li class="ingredient">Origano</li>
</ul>
<ul class="pizzatype">
<h1>Spicy salamino</h1>
<li class="ingredient">Tomato sauce</li>
<li class="ingredient">Mozzarella</li>
<li class="ingredient">Salamino</li>
</ul>
<ul class="pizzatype">
<h1>Onion n' Tuna</h1>
<li class="ingredient">Tomato sauce</li>
<li class="ingredient">Mozzarella</li>
<li class="ingredient">Tuna</li>
<li class="ingredient">Onion</li>
</ul>
</ul>
And a script that console.log the childrens of class "pizzatype":
var pizzatype = document.querySelectorAll('.pizzatype');
console.log(pizzatype[1].children[3]);
The console.log at children[3] returns: <li class="ingredient">Salamino</li>
But I'm looking for a parameter that returns just Salamino
Anyone can help?
Also, is there any reference site that I can consult to find out which parameters can be asked, starting from the children function? Like children.text, children.value etc
Use textContent to get the text of an element
console.log(pizzatype[1].children[3].textContent);
What you're currently doing is pointing to the li element it's self. You need to target the text of this element.
You can do this by using .innerText. You can also use .innerHTML, which will return the text in raw format and won't automatically encode/decode text.
console.log(pizzatype[1].children[3].innerHTML);
I am trying to construct a jquery statement that will slideUp() all <ul> elements whose siblings don't contain a set of specific classes (.clicked, .chosen).
Suppose I have the following nested <ul> structure:
<ul class="mainmenu">
<li>Dogs</li>
<ul>
<li>Fido</li>
<li class="chosen">Barney</li>
<li>Turbo</li>
</ul>
<li>Cats</li>
<ul>
<li>Sylvester</li>
<li>Felix</li>
<li>Garfield</li>
</ul>
<li class="clicked">Hamsters</li>
<ul>
<li>Chubbs</li>
<li>Oreo</li>
<li>Ruby</li>
</ul>
</ul>
For the above example, I would like to slideUp() only the 'Cats' <ul> element ('Sylvester', 'Felix', 'Garfield') because none of it's elements use the 'chosen' or 'clicked' classes.
My current jquery statement reads:
$('.mainmenu').first().siblings().not('.clicked, .chosen').slideUp();
This, and everything else I have tried, returns nothing. Suggestions?
You HTML looks challenging :) but somehow, I've managed to create a query to perform what you're looking for.
And if you want to check multiple class for particular element you can use is() as well.
//Check li doesn't have clicked class and then filter ul next to the li
$('.mainmenu > li').not('.clicked').next('ul').filter(function(){
//Find the ul, if it's any of li doesn't have chosen class
if(!$(this).find('li').hasClass('chosen'))
{
return $(this);
}
}).slideUp();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="mainmenu">
<li>Dogs</li>
<ul>
<li>Fido</li>
<li class="chosen">Barney</li>
<li>Turbo</li>
</ul>
<li>Cats</li>
<ul>
<li>Sylvester</li>
<li>Felix</li>
<li>Garfield</li>
</ul>
<li class="clicked">Hamsters</li>
<ul>
<li>Chubbs</li>
<li>Oreo</li>
<li>Ruby</li>
</ul>
</ul>
<ul id="level_1">
<li id="one">ONE</li>
<li id="two">TWO</li>
<li>
<ul id="level_2">
<li id="aaa">AAA</li>
<li id="bbb">BBB</li>
</ul>
</li>
</ul>
I have ul id(level_2) in my code, based on level_2 I need to get level_1 using JavaScript.
You can use .closest() if you don't know the id name:
var firstLevelUL = $('#level_2').closest('ul');
if you know the id then simply use:
var firstLevelUL = $('#level_1');
You can try using eq() with parents(). eq() is zero base index so first element will have zero index and third element will have 2 index.
$(this).parents().eq(3).attr('id');
I have the following HTML:
<ul id="sortable1 venuetags" class="connectedSortable">
<li id="venuetagli">fried</li>
<li id="venuetagli">garlic</li>
<li id="venuetagli">rosemary</li>
<li id="venuetagli">new potatoes</li>
</ul>
And am trying to get the values of each using JQuery:
$('#venuetagli').each(function(j,li) {
console.log(j,li)
})
However, from the console I am only getting the first value returned.
The ids are supposed to must be unique that is why you are getting single element use class selector instead. Also the id of UL would not have space.
Html
<ul id="sortable1 venuetags" class="connectedSortable">
<li class="venuetagli">fried</li>
<li class="venuetagli">garlic</li>
<li class="venuetagli">rosemary</li>
<li class="venuetagli">new potatoes</li>
</ul>
Javascript
$('.venuetagli').each(function(j,li) {
console.log(j,li)
});
You can simple get the li with ul using parent-child selector
$('#sortable1 li').each(function(j,li) {
console.log(j,li)
});
Just for the test and never recommended way, you can get elements having same id using attribute selector.
$('[id=venuetagli]').each(function(j,li) {
console.log(j,li);
});
Id must be assign to a single element in complete page else it will return only one of those element or unexpected result:
Here is demo with class
<ul id="sortable1 venuetags" class="connectedSortable">
<li class="venuetagli">fried</li>
<li class="venuetagli">garlic</li>
<li class="venuetagli">rosemary</li>
<li class="venuetagli">new potatoes</li>
</ul>
and jQuery:
$('.venuetagli').each(function(j,li) {
console.log(j,li)
})
I am trying to add only select items of a list to a new list. So for example, I only wish to add banana to my second list, the following code in my function adds all the items in coll-selected-list to coll-grouped-list. How may I only make a clone of a specific item. Any tips would be great.
jQuery:
$("#coll-selected-list li").clone().appendTo("#coll-grouped-list");
Markup:
<ul id="coll-selected-list" class="droptrue sort-drop ui-sortable">
<li class="sorted">apple</li>
<li class="sorted">pear</li>
<li class="sorted">banana</li>
<li class="sorted">grape</li>
<li class="sorted">guava</li>
</ul>
<ul id="coll-grouped-list">
</ul>
You can use the :contains selector:
$("#coll-selected-list li:contains('banana')").clone().appendTo("#coll-grouped-list");
Note that the string you pass to :contains is case sensitive.
Here's a working example.
Add a custom data attribute and value to the items you want to clone and then only target items with that data attribute and value.
e.g.
<ul id="coll-selected-list" class="droptrue sort-drop ui-sortable">
<li class="sorted">apple</li>
<li class="sorted">pear</li>
<li class="sorted" data-action="clone">banana</li>
<li class="sorted">grape</li>
<li class="sorted">guava</li>
</ul>
<ul id="coll-grouped-list">
</ul>
$('#coll-selected-list li[data-action="clone"]').clone().appendTo("#coll-grouped-list");
Working Demo:
http://jsfiddle.net/QXEdn/
You can add class to elements which you want to clone e.g.:
<ul id="coll-selected-list" class="droptrue sort-drop ui-sortable">
<li class="sorted">apple</li>
<li class="sorted">pear</li>
<li class="sorted clone">banana</li>
<li class="sorted">grape</li>
<li class="sorted">guava</li>
</ul>
<ul id="coll-grouped-list">
</ul>
// get elements with clone class
$('#coll-selected-list li.clone]').clone().appendTo("#coll-grouped-list");
If you want to clone elements based on index you can use :eq selector:
// clone li containing bannana
$('#coll-selected-list li:eq(2)]').clone().appendTo("#coll-grouped-list");