Find control in javascript or JQuery - javascript

I have a dynamic html table generated using javascript. the table contains diffrent controls like textbox,dropdown box which has custom attributes.How can I loop through all the controls present inside this table and find the control whose custom attribute matches to some value?

This will give you all the form elements inside your table (:input selector):
var $formElements = $('#tableid').find(':input');
You can filter with an attribute selector:
//will select every form element having a data-custom attribute set to 5
var $formElements = $('#tableid').find(':input[data-custom="5"]');
Please see the jsFiddle Demo. For my examples I used HTML5 data- attributes, but the code will work with any attribute you need.
OR you can use the filter() method to write a function that filters your elements:
var $formElements = $('#tableid').find(':input').filter(function () {
return $(this).attr('data-custom') == '5';
});
jsFiddle Demo with filter()

Demo : http://jsfiddle.net/DSqZr/1/
function getControl(_value){
$("#panel :input").each(function(){
if($(this).attr("custom") == _value){
return $(this);
}
})​
}
var selectedCrl = getControl(1);

You can use Attribute Contains Selector.
Check the example it is probably very close to what you need which is finding input & select elements with certain attribute values

Give them a class .control and:
$('.control[attribute=value]')
Check Selectors API for more on attribute selectors.

Related

Select element from jQuery object with matching name attribute

If I've got a jQuery object that contains input fields like so:
var $inputs = $("#signup input");
Is there a way I can directly select one out of it where the name attribute equals a given value?
I've tried $inputs.find("name=firstName").select();, but it seems not to be working.
You need to use attribute-value selector here:
$("#signup input[name=firstName]");
update:
$inputs.filter("[name=firstname]");
Working Demo
You were close.
$inputs.filter("[name=firstName]").select();
Or, using my preferred syntax...
$inputs.filter('[name="firstName"]').select();
Demo
http://api.jquery.com/attribute-equals-selector/
Use:
$inputs.filter('[name="firstName"]');
Special Note:
.select() is used to select the text in the input but not to select the way you mean.
Try
var $inputs = $("#signup");
$("[name=firstName]", $inputs).select();
jsfiddle http://jsfiddle.net/guest271314/571ckuu0/

jQuery selectors on custom data attribute that are not empty

I want to create a simple custom tooltip plugin for jQuery that for every element that has a data-custom-tooltipset. So, something like :
Hhahaha
OR
<button data-custom-tooltip="This is my tooltip for the button Tex">Haha Button :) </button >
So, the function to display the tooltip would be triggered only if the data-custom-tooltip is NOT empty.
Close enough to this : jQuery selectors on custom data attributes using HTML5
You can use :not() selector and remove the empty ones
$('[data-custom-tooltip]:not([data-custom-tooltip=""])')
or
$('[data-custom-tooltip]').not('[data-custom-tooltip=""]')
or based on what #VisioN said in the comments with the Not Equal Selector
var xxx = $('[data-custom-tooltip][data-custom-tooltip!=""]');
use like this
$("[data-custom-tooltip]:not([data-custom-tooltip='']").click(function(){alert("clicked");});
fiddle
Try
.filter()
var tooltip_el = $('[data-custom-tooltip]').filter(function () {
return $.trim($(this).data('custom-tooltip')) != '';
});

jquery hasClass, can it be given the beginning of class name, to get the full class name

I'm trying to do something similar to this question, but it's a bit different, so the solution there isn't working for me.
<span class="a-class another-class test-top-left"></span>
I have an element (this code shows a span but it could be div span or anything). This element has a class beginning with test- (test-top-left, test-top-right etc.) I've triggered a click event on classes starting with test- and saved the clicked object as var object = this;. Simple stuff so far.
What I'm trying to do now is get the full name of that class (test-top-left). I know it starts with test- but what's the full name. The thing is that there are other classes a-class another-class and test-top-left. Can hasClass be used to get the full name of the class? I'd prefer not to use find() or filter() just because there may be additional elements within that also have class="test-"
Edit:
The code I have now is, but it gives me ALL the classes. What I need is the single class beginning with test-.
var object = this;
$(object).attr('class');
So now I for loop through all the classes and test each one separately, which seems like a lot of unnecessary code. I'm hoping jQuery has a clever way to get the exact class that was clicked right away.
Description
You can use jQuerys Attribute Contains Selector, .attr() and .click() method.
Attribute Contains Selector - Selects elements that have the specified attribute with a value containing the a given substring.
.attr() - Get the value of an attribute for the first element in the set of matched elements.
.click() - Bind an event handler to the "click" JavaScript event, or trigger that event on an element.
Sample
html
<span class="anyclass test-hello">Hello World</span>​
jQuery
$("[class*='test']").click(function() {
var object = $(this);
alert(object.attr("class").match(/(test-.*?)(?:\s+|$)/)[1])
;});
Check out the updated jsFiddle
Update
If you dont want to use regex you can do this.
$("[class*='test']").click(function() {
var object = $(this);
alert("test-" + object.attr("class").split("test-")[1].split("-"))
;});
​
More Information
jQuery - Attribute Contains Selector
jQuery - .attr()
jQuery - .click()
jsFiddle Demonstration
This should work for you:
var object = this;
var className = object.className.match(/(test-.*?)(?:\s+|$)/)[1];
Class name is the name of the class you are looking for.
If you don't want to use split or regex, you can try having the class in a separate attribute
<span class="someclass test-something" _rel="test-something">test<span>
or
<span class="someclass" _rel="test-something">test<span>
with the script
$("[_rel*='test-']").click(....
And to retrieve the attribute, use $(this).attr("_rel")

Search through document and find all inputs with titles

I want to search through my document, and find all inputs with title attribute, but at the same the title attribute can not be empty. So it should look for every input with title attribute that has at least one character in length.
Then I would like to make some event on those inputs (like add them some CSS class).
Is that even possible with jQuery or other javascript library?
I believe this would give you what you want:
$('input[title][title!=""]')
To apply css
$('input[title][title!=""]').addClass('class1 class2 class3');
http://jsfiddle.net/5hkAG/
$("input[title]").not('[title=""]')
var myInputs = [];
$("input").each(function() {
if($(this).attr("title").length > 0) {
myInputs.push(this);
// do other events as usual, using $(this) as selector for current input
}
});
// do something with myInputs, which is an array of all inputs with a title attribute

get the value of hidden parameter present in a div using jquery

I have a div whose id is "mainDiv" and a hidden field is in this div whose class name is "myHiddenField". Now I want to get the value of that hidden parameter using jquery.
I have tried:
$("#mainDiv .myHiddenField").val()
and
$("#mainDiv .myHiddenField").attr('value')
$("#mainDiv .myHiddenField").val()
This is a fairly straightforward combination of $, find, and val:
var value = $("#mainDiv").find(".myHiddenField").val();
Or you can omit the find part by using a descendant selector instead:
var value = $("#mainDiv .myHiddenField").val();
var value = $('#mainDiv > .myHiddenField').val();
Use a combination of id- and class-selector, so that you select the element of class myFiddenField that has an ancestor with id mainDiv. When you have selected the proper element, you use .val() to get the value of that element.
Something like this:
$("#mainDiv .myHiddenField").val()
HTML part :
<div class="myHiddenField">hidden value</div>
JS Part:
var x = $('.myHiddenField').html();
Here x gives the value of your hidden div.

Categories

Resources