I have a list of elements and need to make some amends to the first element in the list using jquery. I have tried a few methods to target the first item but none of them seem to work in IE7. These are the following methods I've tried...
$(this).eq(1)
$(this).first()
$(this:nth-child(1))
All of these methods worked in all browsers except IE7, does anyone know of a fix to use for IE7 or a different method that will work in IE7?
Thanks in advance for any help?
Try this.
<ul id="list">
<li>list item 1</li>
<li>list item 2</li>
</ul>
$('#list li').first().css('background-color', 'red');
It's working in IE7 http://jsfiddle.net/jur4x/JKBH4/
Try like this
$(this:first-child)
Will get more info from here
EDIT
Sorry for the confusion.
What I was trying to say is to use first-child instead of first()
You can use like this $('ul li:first-child').css('background-color', 'red');
.first() is a valid function and will work.
For example:
$("li").first(); // will match the first li in the tree
Related
I have an <li> in which are TWO <ul>.The second <ul> is hidden and should be shown when i click inside the first <ul>.
I've tried this : $(me).parent().parent().find("ul").slideToggle();
$(me) is an instance of this and the <li> Wrapper-Element.
The Problem is now that the hidden <ul> is shown but the visible <ul> hides.
And it should not hide that.I want the hidden <ul> to show and hide right when i am clicking on the visible <ul>.
Another thing to mention is that i am using this code in an success function of an ajax call :
success:function(data){
$(me).parent().parent().find("ul").slideToggle();
}
Maybe someone can help me.I probaply just need to adjust the .find() but i dont know how to do it ....
You can use CSS child selectors in jQuery. The following fiddle demonstrates that if you click inside the first UL, the second will slide.
$('li ul:first-child li').click(function(){
$(this).parent().parent().find("ul:nth-child(2)").slideToggle();
});
https://jsfiddle.net/mqjvt2nu/2/
There are a bunch of ways to do this. You can specify classes or id's and target that way. You can use the .siblings() function in jQuery. You could also use the .next() or .prev() functions.
Try using the .not method:
$(me).parent().parent().find("ul").not(':visible').slideToggle();
For the sake of simplicity I'll narrow down the question as below. I have a large code running in the click js functions. To represent that All I have added an alert()
HTML
<ul>
<li>Test li 1</li>
<li>Test li 2</li>
<li>Test li 3</li>
<li>Test li 4</li>
<li>Test li 5</li>
</ul>
JS
Method 1
$('ul li').click(function(){alert('hi');});
Method 2
$('ul').children().click(function(){alert('hi');});
Method 1 and method 2 both works fine.
Which one is better ? Is it better to use the selector or use the children method ? What's the purpose of having a children method when we can use selector?
Test Fiddle
I'm just grabbing the basics and hope not knowing something is not a crime. Thanks
While both of those pieces of code work correctly on the sample HTML they are not identical.
.children returns all child elements (whether they are an "li" or not).
"ul li" as a selector returns all "li" descendants of the "ul" whether they are children or not.
These two are equivalent and select only "li" children of the "ul" parent:
$('ul > li').click(function(){alert('hi');});
$('ul').children("li").click(function(){alert('hi');});
As for which is better (the original question), there is no real answer for this I suspect and will depend on your actual requirements and html (when you ask for which is 'better' what do you mean? Performance? Maintainability?).
Usually the former will use the CSS selector engine of the browser where the selector you are using is supported, and the later will always use jquery built code (I think) so I would go for the former in most cases.
as to
Which one is better ?..
updated
actually, it depends on the HTML structure... if incase, you have small number of <li>'s in ul (first level) going with children selector is better
you can check this in js.perf...link here
but if you have large number of <li> (in first level) the children selector gets slower ..
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
How to get nth jQuery element
I have this simple code:
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
I know that my 2nd element should have a class active, how do I add this class?
this code won't work:
$('ul li').get(1).addClass('active')
I assume it is becuase it returns a dom element and not jquery element. but how do I do it right?
=======
Of course 2nd element is an example. I need each time to change the active class from a variable called theActiveClassNumber
$("ul li:nth-child(2)").addClass('active')
or
$("ul li:eq(1)").addClass('active')
get() returns a DOM element so you have to re-wrap in the jQuery object:
$( $('ul li').get(1) ).addClass('active');
you can do like #Kanishka answer that work to, but you can try this one too, may be can help you,
$("ul li:nth-child(even)").addClass('active');
$("ul li:nth-child(odd)").addClass('active');
Not a direct answer to the question, but:
If you want to get certain jQuery Object, you should use .eq() instead of .get().
I have a list like the following:
<ul id="links">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
I'm adding a target attribute to each link using jQuery, because I don't want to alter the server-side HTML output; it's used in many other places and this is the only instance where the links should have this attribute.
$('#links a').attr('target', '_top');
The problem is that new links are dynamically appended to this list client-side, also using jQuery; when they are, they obviously lack the target attribute, so I end up with this sort of thing:
<ul id="links">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
I cannot alter the jQuery script which is appending the links in order to include the attribute, so my question is this: I know I can use live() to automatically set up event handlers for dynamically generated elements, but is there a way of automatically adding attributes to any new elements added?
I don't think there's any way to do what you're asking. But you can use live to accomplish the same thing:
$('#links a').live("click", function(e) {
$(this).attr('target', '_top');
});
If you're not averse to plugins, you might take a look at livequery, which will accomplish what you want.
Here's an example:
$("#links a").livequery(function () {
$(this).prop("target", "_top");
});
http://jsfiddle.net/vRF3G/
You might want to look into jQuery's special event system. It allows you to create custom special events that get triggered when certain conditions are met.
Here's another SO thread with a "onContentChange" event:
Create a jQuery special event for content changed
And here's another article on jQuery Custom Special Events:
http://benalman.com/news/2010/03/jquery-special-events/
This is a terrible solution:
$("#links a").live("mouseover", function() { $(this).attr("target","_top"); });
Can't click on it without mousing over it, the target attribute is set before it is needed.
Greetings,
I would like to toggle a huge multi-level ul with mootools 1.1 or plain javascript.
The list looks like:
HTML:
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
<li>
<ul>
<li>ddd
<ul>
<li>fff</li>
<li>ggg</li>
</ul>
</li>
<li>eee</li>
</ul>
</li>
</ul>
What I would like to do initially is to show the first level expanded, and the other levels collapsed and when each of the list items is clicked, to expand the ul below it.
Is it possible to do it without (greatly) modifying the html above?
From the documentation, I see that Fx.Slide is the most appropriate, however it accepts the id of the element as a parameter, which means I have to assign id's to each list item.
Is there a way by using selectors of collections of elements starting from the top?
I'm not sure whay I'll say apply with the very old 1.1 version. However, at least since 1.2, the element you need to pass is either the ID (like you said), either the actual element.
If you can use another version than 1.1, try the 1.3 which makes it easier to select the elements you want.
Here, I believe you need every <ul> element which has a direct <li> as parent. MooTools 1.3 features this new selector engine Slick, which would accomplish it fairly easilly: ul !> li.
However, I'm not sure (I didn't success) that the direct child selectors works properly with 1.1.
Here is what I came up with: http://jsfiddle.net/rCfwq/