How to Reach the Element Itself Inside Jquery's 'Val'

jQuery : how to access the name of the element

Just use .val(fn):

$("input[id^='product_']").val(function() {        return this.name;    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><input id="product_code1" name="Samsung"><br><input id="product_code2" name="Apple"><br><input id="product_code3" name="Huawei"><br><input id="product_code4" name="Motorola"><br>

return specific index of array using val() in jquery

val() is still what you want, but since it's returning an array, you have to use your accessor on val(). Putting them both together:

$("#slider").val()[0] // first value
$("#slider").val()[1] // second value

jQuery chaining val()

You allready have the value in a variable. just add that in the css method:

$("#input").val( _back ).css("background-color",  _back);

Another reason this would be better, is that you dont need jQuery to start the method .val(), which saves some overhead.

The reason it doesn't work is because $(this) in the css method doesnt exist (well, it does, but its not pointing to the element you want). Functions like each or animate set the this value, css doesnt. This probably is because there are not alot of reasons to use this in css

Jquery passing data title to self

1. Check in condition if the attribute of element is equal to desired value then get the value of the element

$("span").each(function() {
  var $self = $(this);
  if ($self.attr("data-title") == "span") {    $self.css("color", "red")  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><span data-title="span">red</span><span data-title="">not red</span>

How to console log input val?

When you pass a value to the function, you're setting the value of the element not obtaining it, the jQuery methods follow a chaining pattern, so they actually return the element itself so if you want to set a value and then retrieve it:

var dateCat = $(".usp-input-category").val(dateSelected);

console.log(dateCat.val())

Just so you're aware, class selectors i.e. $(".usp-input-category") return an array. So running .val with a value in the constructor on the array will change the value for all the elements with this class.

The .val function, when constructor is empty, will return the value of the element, where as when a constructor is called with a value, it'll return the element itself.

Worth noting differences between .val(), .text() as the later is probably the function you should look at.

• .val gets/sets value of the input elements
• .text gets/sets the innerText of elements

how to get value of HTML from jquery or javascript

To get "PersonA": $('#v-0 h2 a').html();

To get href of that link: $('#v-0 h2 a').attr('href');

To get "Accountant": $('#v-0 dl dd').html();

You can modify the id ("v-0") at the start of the selector to choose a particular "row" of your data set.

Modify the value of each textfield based on original value using jQuery

Can just use val() with a callback argument. It will loop over all elements for you:

$('input[type=text]').val(function( index, originalValue){
     return $.trim(originalValue);
});

val() API docs

jQuery get html of container including the container itself

If you wrap the container in a dummy P tag you will get the container HTML also.

All you need to do is

var x = $('#container').wrap('<p/>').parent().html();

Check working example at http://jsfiddle.net/rzfPP/68/

To unwrap()the <p> tag when done, you can add

$('#container').unwrap();

---

Related Topics