JQuery :: Selecting Ul Li Element By Order?
Dec 15, 2010I Have this code
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
[code]....
I Have this code
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
[code]....
I have a problem with selecting certain elements with jquery.I have a "newsfeed" where I have a lot of these tables:
Code:
<table class=newsfeed_table>
<tr>
<td class="newsfeed_table_icon"><img src="/CodeIgniter/verkstad/icons/nf-msg-cr.png" alt=""/></td>[code]....
It's basically just a table containing a message, who wrote it and when.I'm trying to build a function that filters what types of posts are visible in the newsfeed. So by clicking a button I want to be able to filter out the "message"-post or the "sale-alert"-post.Only way I can see which type of post it is, is by looking at the image source in the table. So depending on what that is, I want to set the table to display:none.
But I've been looking into the jquery selector a bit but I can't make it work. I've tried with .each(function and child selector...
Is there a way to get the next element in document order? For example I want to get the next "<a>" element, whether it's a sibling, descendant of a sibling, or ancestor's sibling
View 1 Replies View RelatedIs there any way in jQuery to move the order of events on a dom element. I have an element (the add button on a jQGrid display) that I want to place a click event in front of the one one put in by jQGrid. I had a look at the jquery.eventmanager plugin but that doesn't really allow the kind of manipulation I want. I also found it didn't like handling the click event anyway.
I'm thinking something along the lines of;
var saved = $(ele).getEvent('click'); //this function doesn't exist yet
$(ele).unbind('click').bind('click.new',my_new_func).bind('click.old',saved);
This seems to be a peculiarone. Let me set the stage.I am selecting the href inside of ananchortag.I MUST disable all anchor tags inside my div.Here is the problem, I am redirecting old content to new content.I have over 1200 pages all with 1-20 anchor tagsAll of the anchor tags have a regular href url OR a javascript function.It looks like this:"javascript:open_window('detail1.html')"All I want is a way to extract the:detail1.html which can bedetail21.html ordetail.html also (thought about using slice to cut out what I need)
View 2 Replies View RelatedWhen I click on my h3 tag I would like to do a replace on the next "dframe" element (not all "dframe" elements). I've tried the code below but it doesn't select the next specified element. I guess next() only covers the next sibling?
$(".regionfulldublin h3").click(function() {
$(this).next('dframe').replaceWith('<iframe></iframe>');
});
I need to select a class within an element. the class is generated by the code using .addClass. I suspect this is actually really easy and I'm just being stupid,
View 9 Replies View RelatedHow do I select an element based upon the text in a variable?
Here's the basic HTML
<ul id="pictures">
<li><img src="images/ernst/01_aelpler_maccaroni.gif" />Älpler-Maccaroni</li>
<li><img src="images/ernst/02_hoernli_mittel.gif" />Hörnli mittel</li>
<ul>
I want to show and hide the <li> Element. thought i'd do this by applying a css-class to the element
Here's what I came up with so far:
$(".download_liste li a").click(function() {
var showPic = $(this).attr("href");
$("[name*="showPic"]").next.toggleClass("hiddenpic");});
});
Well, it doesn't work, anybody care to tell me why? Or am i way off?
how silly I would sound by asking thi squestion but here is my case. I have an HTML as below
====
<body>
<table>
<tr id="menurow">
[Code]......
I would like to grab the onChange value of a select box which is inside a <td> and pass it to the next <td> and place it in a <span>
My php iterates multiple table rows with select boxes and a line total span.
I want it to work similar too..
But of course that wont work because the span is not inside the select.
Is there a way of grabbing an elements parent element then the next element in the order and its contents.
Heres my full page:
I'm trying hard to select only the element under the mouse cursor, but for example, when I do this:
[Code]...
I have an autocompleter in which i am trying to grab the text in the first element in a list of returned results from the db. I have been able to grab the first element in the list with the below code however, it brings up an alert for every realtime list that comes back so multiple times. Is there a clever way to make an if/else statement that forces it to alert only once?
var item = $('.title_div:first').text();
alert('this item ' + item + ' is the first to be showed');
I am having an issue in firefox 3.5.3 I am using the following selector
[Code]...
I'm trying to add a class to a <li> where the href within it contains a string. I can apply the class to the anchor without a problem, but I can't seem to select the parent. Is an anchor a child? <li><a href="random.xls">Random Stuff</a></li>
In this case, since the href contains .xls, I'd like to be able to add a class to it. I've tried a variety of things, most recently this, but no luck: $('li has(a[href$=".xls"])').addClass('excel');
I'm using a form in several places for this project. I don't want to duplicates of this form so I have it as an include file. Each page requires all the same fields, however, there is one page where I'd like to remove two fields.
<fieldset>
<label for="FirstName">First Name</label>
<input id="FirstName" />
</fieldset>
Is there a way to remove an input field and it's label by selecting the ID of the input field? I looked at the JQuery doc, and there's a prev + next selector which shows $('label + input').css ... this will set css properties for an input element that follows a label element. something like $('#FirstName > label + input').remove...
I need to select the lowest element containing a given string.The :contains(text) selector returns the element I want but also allits ancestors (since they too contain the text). I haven't been ableto figure out a selector expression that returns only the lowestelement.
View 1 Replies View RelatedI can't figure out how to coax JQuery in to selecting an element that is manually (dynamically) inserted in to the DOM after the page loads. For example:
If I have HTML:
<div id="bar">
World!
</div>
Then I create a new element and insert it in to DOM:
var foo = '<div id="foo">Hello</div>';
$("#bar").before($(foo));
I end up with this, which is great:
<div id="foo">Hello</div>
<div id="bar">
World!
</div>
Now that's very nice, but later on I might want to do something different with the element I inserted, using JQuery to manipulate that new element. But if I try to do:
myHappyEl = $("#foo");
Then myHappyEl will be undefined. JQuery doesn't see it, presumably because it go attached after JQuery was done watching for such things. How I can coax JQuery in to noticing the existence of new elements created not only in exactly the manner shown here, but in general after the DOM has fully loaded.
I've seen lots of suggestions addressing a possibly related but subtly different issue, wherein the solution is to use .live() to attach an event listener when an element comes in to being. That would be brilliant if I wanted to capture a click event or something, but I don't; I want to be able to select the dynamically added element(s). Perhaps there's a simple way to accomplish this using live(), but I haven't seen it yet. If there is a solution using live then I'd like to know what event and what function to trigger!
I have a text box im dynamically adding to the dom created with this line of code
When I try to get the value of the text box by referring to its id. I get an "undefined". I can get the value if I use plain javascript.
After loading a HTML fragment using AJAX, I can not select the newly embedded elements using the $("#id") notation. document.getElementById works fine though.
View 7 Replies View RelatedYou can't select the 'text' part of an 'a' element with css, e.g. in the statement <a>some text </a> you can't use a css attribute selector a[text = "some text"]{} to style the 'a' element. You can select all named attributes such as HREF, TITLE, etc. Does jquery's .attrib map strictly to the css usage or is there some way I can match on that part of an 'a' element?
I need this because a menu list I'm working with doesn't by default require a TITLE element so I can't assume I can match on this attribute.
I am trying to select a div element based on its display property. Due to some reasons I can't use Id to select this element, DIV element is structured like this:
<div
class
="details"
id
[Code]....
i've been breaking my brain about this issue for a bit now, so here is my question.
I have a SELECT with various OPTIONS
<select id="myselect" name="myselect">
<option value='$variable' >1 - variable ammount of this option</option>
<option value='$variable' id="showOption">2 - gets added once at the end of the SELECT</option>
[Code]....
I'm trying to find the currently clicked index of .accordion_trigger from within another element.
When inside the .accordion_trigger click event I can simply do the below to get the current clicked index:
Code:
$('.accordion_trigger').click(function(){
var index = $('.accordion_trigger').index(this);
}
return false;
});
Obviously this doesn't work when called from within another element. I understand that 'this' is part of the problem but can't seem to find a way to form the code in such a way for it to produce a valid result. Thus far I only get -1 or 0.
When .accordion_trigger is clicked it has an "$(this).toggleClass('active').next().slideDown();" applied so in theory I shold be able to search for which of the .accordion_trigger's are "active".
I've also tried doing this via the below method but to no avail:
Code:
var current = $('.accordion_trigger');
current.each(function() {
if ($(this).hasClass('active')) {
[Code]....
I'd like to have an alert of some type, either standard alert or a hidden div, show up when a user selects an option in a select element.
For instance, if a select element has 5 options in it and the user chooses the first one, they would get an alert that says "You have chosen the first option". I'm confident this is something that can be done with a few lines of code, but I'm not sure where to begin.
Here's the logic - I'm just not sure how to write the syntax...
If ("#select option") changes and ("#select option:eq(0):selected"), fade in the div ("alert").
I have a div, id is 'pages'. Inside 'pages' is a dynamic amount of divs id = 'posts' each followed by another div id='date_area'
Example:
HTML Code:
<div id='pages'>
<div class='posts'></div>
<div class='date_area'></div>
<div class='posts'></div>
<div class='date_area'></div>
<div class='posts'></div>
<div class='date_area'></div>
<div class='posts'></div>
<div class='date_area'></div>
... etc
</div>
I need a way to select BOTH the first occurrence of <div class='posts'></div> and the LAST occurrence of <div class='posts'></div>. Then I need to set different css rules for both of them. In CSS, I can use first-child, but this doesn't work in older browsers. CSS last-child does not work here because it targets date_area and also doesn't work in older browsers.
I am using Ben Alman's JQuery resize plugin in order to obtain the varying computed width of an element when the window is resized (the element in question is a page wrapper that exhibits the expand-to-fit behavior of a block box, and it's computed width is obviously influenced by the resizing of the window. Essentially, what I need to be able to do, is to reference a variable that is defined in a .resize() function ('width_page') in a seperate .each() function.
[Code]...
I now understand that variables can't cross boundaries like in the example above, which leaves me a little stuck. I also understand that this is specific to the context of the .resize() function, and that it can't be taken out of it without using an element selector. Is there some way I can call the .resize() function in my .each() function?