in each loop selected index of select element are equal - javascript

I have some select element in a page with css style set for them.I use this selector for select all them :
$('.Field3')
and with each loop I want to get selected index of them,but when I change one of them selected item I get selected index set for all.
I create a jsFiddle for it.please change a select element item and click on the button:
http://jsfiddle.net/uLvyS/

$(this + "option:selected")
does not make much sense. In the function passed to .each, this is a jQuery object, not a string. You cannot magically turn a jQuery object into a selector.
What you want is .find, which finds descendants of the element(s) in the jQuery object: http://jsfiddle.net/uLvyS/1/.
$(this).find("option:selected")

Related

Selecting the next input of an event.target

I have (an array of) two inputs product and category.
The product one is an autocomplete.
I would like to fill in the category when a product is selected.
the problem that the event.target is not a jquery object, so it seems I can't apply the jQquery's .next("input")
Here is my code:
var addedProduct = $(".produit:last > input");
addedProduct.autocomplete( {
source: Object.keys(availableProducts),
select: function(event, ui){
var category = event.target.next("input"); // something like this ???
category.value = availableProducts[ui.item.value]; //{"product1":"category1",...}
}
})
The inputs location is like this:
You can create a new jQuery object from the event target with $(event.target). You'll be able to call .next on it afterwards
The other solution without jQuery is to use the native DOM API. You can select the next element with nextElementSibling. The only requirement is that the element you want to target must be immediately the next element.
EDIT: From the DOM structure provided you can use .parent().next() to select the next element at the parent level. Then on this new element use .find() to select the wanted input. Note that the code is highly tied to the DOM structure. You could use the id to directly select the element.
$(event.target).parent().next().find("input");

Select all the elements within an element having an attribute set to a specific value

I have the followings defined :
var excludedFiltersPanel = $("#excludedFiltersPanel");
var includedfiltersPanel = $("#includedfiltersPanel");
where *Panel is just a div.
in excludedFiltersPanel there are some div's with attribute data-iscorefilter="true" e.g. :
<div id="filterPanel-LastName" class="filterPanel" data-iscorefilter="true">
<Some Stuff here!>
</div>
I am trying to get them and move them to includedfiltersPanel:
It seems neither of these is a correct syntax:
excludedFiltersPanel.('[data-iscorefilter="true"]')
excludedFiltersPanel.$('[data-iscorefilter="true"]')
1.What is the correct syntax?
2.How do I append them to includedfiltersPanel? (I know how to append a single item, but not sure what is the common good practice here, e.g. using for loop or some JQuery magic)
Since excludedFiltersPanel there are some div's with attribute data-iscorefilter="true"
Use .find()
Description: Get the descendants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element.
It would look like :
excludedFiltersPanel.find('[data-iscorefilter="true"]')

Get class of forth cell adjacent to current cell

I am trying to get class of fourth cell using eq() selector. Its working without eq selector like this :
alert($cell.closest( "td" ).next().next().next().attr("class"));
I tried using multiple variation of eq() but it's not working please help.
None of the below are working.
$cell = $(this);
alert($cell.find( "td" ).eq(3).attr("class"));
alert($cell.closest( "td" ).eq(3).attr("class"));
alert($cell.( "td:eq(3)" ).attr("class"));
That's not how the eq method work.
Given a jQuery object that represents a set of DOM elements, the .eq() method constructs a new jQuery object from one element within that set. The supplied index identifies the position of this element in the set.
As the closest method returns one element, eq(3) returns an empty set in here. You can use the nextAll method for creating a set of next siblings. Then eq(3) will return the fourth element in that set:
$cell.closest("td").nextAll().eq(3).attr("class");
Please note that if this here refers to a td element then closest('td') does nothing.

Getting previous element of given in dom model

I have list of elements on my page
input
input
span
input
span
etc
I want to select each input that sits before each span, and after do, whatever i will have to. Is there any available ways to do that?
Use prev() to select the previous input of any given span:
$(this).prev("input");
If you're trying to select all previous inputs of all spans in 1 selector try this:
​$("span").prev("input");
http://jsfiddle.net/6hPRa/1/
$("span").prev("input").css("background-color", "pink");​
You have to use .prev()
ex :
$('span').prev("input") //this is input element
Use .parent() or .parents('.selector').first()
jQuery('.given').parent();
OR without jQuery
var el = document.getElementById('id');
el.parentNode...
AHH, previous-element...
Ok, now you have an answer.
Further there is a method
.siblings()
If you want the prev-prev element do so
jQuery('.given').prev().prev();
It's not that easy to define which one should be the first, I suggest go with set tabindex for each of them, and then with that using that as a selector you can always easily grab the previous one or next one

Get value of last option of a drop down?

I have dropdown menu..which is dynamic.. How can get value of the last item in that drop down (using jquery is also acceptable)
With jQuery it's super easy:
var lastValue = $('#idOfSelect option:last-child').val();
With plain Javascript it's not much worse:
var theSelect = document.getElementById('idOfSelect');
var lastValue = theSelect.options[theSelect.options.length - 1].value;
With jQuery:
$('select option:last').val()
Of course you should use a proper ID to address the select element.
If you mean "menu" it terms of a list, you can do it similar:
// gives the text inside the last <li> element
$('#menu li:last').text()
// gives you the attribute 'some_attribute' of the last <li> element
$('#menu li:last').attr('some_attribute')
The key here is to use the :last selector.
One more way of doing this
$('select option').last().val()
or for list
$('ul li').last().text()
While above 2 suggestions are perfectly valid, I feel this approach is cleaner than modifying the selector.
Offcourse you should add id/class of specific select/ul if you want to target the particular menu/list.
Using attributte selected.
$('#SelectName option:last-child').attr('selected', 'selected');
$('#id_of_select option:last-of-type').click();
OR
$('#id_of_select option:last-child').click();
Both of these should find and click on the last option on any dynamic drop-down list.

Categories