I'm trying the new data-function in jQuery but can't make it work.
Here is a little bit of code I use for testing:
HTML
<ul>
<li data-test="list">List item</li>
<li data-test="list">List item</li>
</ul>
<ul>
<li data-name="sida">oko</li>
</ul>
JS
var test = $('li').data('name');
alert(test);
The same thing on jsFiddle:
http://jsfiddle.net/w95mY/1/
I expect to get "sida" from the alert. I found out that it works if I delete the first list. Why is that? How do I solve it?
Consider telling jQuery how to find exactly one element. For example, tell it to look for any li element with a data-name attribute:
var test = $('li[data-name]').data('name');
alert(test);
Or you can tell it to look for the last li:
var test = $('li').last().data('name');
alert(test);
Both show an alert with text "sida".
Related
First time i've used jquery and I'm in trouble .
I used the following code in html :
<ul>
<li>hello </li>
<li>hello 2</li>
<li>hello 3</li>
</ul>
<script type="text/javascript" src="jquery-2.0.3.js"></script>
<script type="text/javascript">
var lis = jQuery('ul li')
console.log(lis)
</script>
When I checked my version , It was 2.0.3 .
But I opened firefox and used Inspect element to check the console ,
it returns
[17:57:32.367] [object Object]
instead of [<li>hello</li>]
Actually I'm learning via Tuts free courses (Hello Jquery by jeffery way) at this link; and he gets different output
Because jQuery('ul li') returns a DOM object. If you want to get internal html of li or ul then you can try it
jQuery('ul').html() // for ul internal html
jQuery('ul li').html() // for li html
or you can also use that object like jQuery(lis).html()
It returns that because it's just jquery object(element). You are just selecting that list item, not the content in it. Add .text() function to your variable for getting contents of selector:
var lis = jQuery('ul li').text();
console.log(lis);
I have certainly extremely simple problem and I'm a little ashamed of not being able to solve it by myself.
HTML:
<div>
<ul class="test">
<li>1</li>
</ul>
<ul class="test">
<li>2</li>
</ul>
</div>
JavaScript:
var tests = document.getElementsByClassName('test')[0].innerHTML;
alert(tests);
jsFiddle:
Try it
Currently, the result shows me <li>1</li>.
This is not what I want. I want the result to be <ul class="test"><li>1</li></ul>.
I tried using .parent() (I can use jQuery) but it gives me all <ul> tag while I just want the first. I also know that I could use some .split() but it is surely not the adviced way.
I thought the problem might be coming from the .innerHTML, there is a function that would allow me to recover also the target element, and not just his children?
Just use outerHTML instead of innerHTML
var tests = document.getElementsByClassName('test')[0].outerHTML
Check Fiddle
You can do the same with jQuery. $.each to iterate over the elements and then use this so that it only points to that elements instead of all the elements with that class
jQuery
var $tests = $('.test');
$tests.each(function() {
console.log(this.outerHTML)
});
jQuery Fiddle
I'm having a problem with JavaScript/jQuery at the moment where I'm trying to access the element inside the h4 element in my code. I'm doing this because I would like to dynamically display to the user how many guides are available in each "h4" section. For the PC section, it should display "4 reviews available" and for the Xbox One section, it should display "3 reviews available". However, both say " reviews available", and I'm assuming it's because I'm not using the jQuery functions properly. Here's the HTML code:
<h4><li class="console">PC (<span class="number"></span> reviews available)</li></h4>
<div class="gameList">
<ul>
<li class="game">Guide #1</li>
<li class="game">Guide #2</li>
<li class="game">Guide #3</li>
<li class="game">Guide #4</li>
</ul>
</div>
<h4><li class="console">Xbox One (<span class="number"></span> reviews available)</li></h4>
<div class="gameList">
<ul>
<li class="game">Guide #1</li>
<li class="game">Guide #2</li>
<li class="game">Guide #3</li>
</ul>
</div>
And here's the jQuery/JavaScript code:
$("h4").each(function() {
var node = $(this).children().children(); // gets node that has "number" class
var count = $(this).next().children().children().length; // gets number of li tags
node.innerHTML = count;
});
I tested whether or not it's properly getting the correct node and count by using the alert function for JavaScript, but for some reason, node.innerHTML = count won't display the contents of "content" properly in the element. Rather, it just displays a blank. Does anyone know why?
Its a jquery object not a DOM one..use this...
node.html(count);
node is a jQuery object here. It does not have "innerHTML". Instead you can use one of these:
node.html(count);
node.get(0).innerHTML = count;
node.get(0) will give you first DOM object from jQuery one.
A good practice is to prefix or suffix all jQuery objects with $ (e.g. $node), so that you will always know if a variable is meant to be a jQuery object.
use find() lot more cleaner and readable
$("h4").each(function() {
var $this=$(this);
var node = $this.find('.number');
var count = $this.next().find('li').length; // gets number of li tags
node.text(count); //or html()
});
and you have come invalid HTML li in h4 make sure you change that
working fiddle here
Do not use .children().children().
Only one .children() would do.
$(this).children('.game');
Also innerHTML is plain javascript. use .html(value) as node is JQuery Object.
$("h4").each(function() {
var node = $(this).children('.number');
var count = $(this).next().children('li').length;
node.html(count);
});
Reference to JQuery APIs:
.html()
.children()
$("h4").each(function() {
var $spanNumber = $('.console .number', this),
gameListCount = $(this).next().find('ul li').size();
$spanNumber.text(gameListCount)
});
You may use this also,
$("h4").each(function() {
var node = $(this).find('.number');
var count = $(this).next().find('.game').length;
node.html(count);
});
I have the following HTML:
<ul>
<li></li>
<li></li>
<li></li>
</ul>
and the following jQuery code:
$('> ul li', body).each(function()
{
$('</ul><ul>').insertBefore($(this));
});
This code should insert a closing tag followed by an opening tag for an unordered list in front of each list item, but instead it inserts <ul></ul>. These are the wrong way around! Why does jQuery do this and does anyone know how to solve this problem?
wrap each li in a ul and remove original outer ul
$('ul li').wrap('').end().find('ul').unwrap('ul');
Final html:
<body>
<ul><li></li></ul>
<ul><li></li></ul>
<ul><li></li></ul>
</body>
In action: http://jsfiddle.net/ZyMNn/
After a prompt to rethink a bit, simpler should work:
$('ul').find('li').wrap('<ul/>').parent('ul').unwrap();
Updated fiddle: http://jsfiddle.net/ZyMNn/2/
jQuery is not about inserting HTML markup somewhere. It is about manipulating the DOM - and to do that, $('</ul><ul>') will somehow get parsed to an element which then gets insertedBefore(this). Since </ul><ul> is invalid markup, your browser does its best when trying to parse it and comes up with <ul/> then, which gets inserted in your document.
jQuery will always fix invalid HTML.
$('</ul><ul>')
That is invalid. You can't start HTML with an end tag. Think of that string a tiny little HTML document. It has to be valid.
I'm a little confused on what you are trying to do? Are you trying to change.
<ul>
<li></li>
<li></li>
<li></li>
</ul>
into this?
<ul><li></li></ul>
<ul><li></li></ul>
<ul><li></li></ul>
If so, then maybe something like this.
var list = $('> ul', body);
var x = $('<div>');
$('li', list).each(function(){
x.append($('<ul>').append($(this)));
});
list.html(x);
I found a bit of Javascript to create a news ticker—essentially just rotating through the items of a list.
<script>
var ticker = $('ul.ticker');
ticker.children(':first').show().siblings().hide();
setInterval(function() {
ticker.find(':visible').fadeOut(function() {
$(this).appendTo(ticker);
ticker.children(':first').show();
});
},5000);
</script>
It worked really well when I just had list items, but when I made the list items into links it started acting strangely. I watched it with firebug and it appears that it goes through the list just fine the first time, then starts creating new list items:
<li style="display: none;"></li>
It seems to alternate displaying one of these <li> then after it goes through the list the first time.
Thank you for your help!
edit 1: HTML
<ul class="ticker">
<li>News Item</li>
<li>News Item 2</li>
</ul>
I think, that problem lies in ticker.find(':visible'). If your links are wrapped in li, then that code finds li and a inside of it and appending them separately to the ticker. Try ticker.find('li:visible').
EDIT: or ticker.children(':visible').