We Keep Coding

How to get the value of inner attribute of an li using jquery?

I have following code in Java script from which i have to need get the value on an inner attribute of <li>.
<li class="selected" data-val="1">
I have get the tag using
var a = document.getElementsByClassName('selected');
it is providing me <li> whole tag that is fine. But i have to need get the value of data-val attribute (which is within the <li>) that is 1.
How can i get the value of data-val using variable a that is defined.
Please explain..

Here a is a collection object so you need to get the element reference using index then use .getAttribute() to get the attribute value()
var a = document.getElementsByClassName('selected');
var val = a? a[0].getAttribute('data-val') : '';
//another option for modern browsers
// val = a[0].dataset.val
Since you have jQuery, you can use jQuery to select the element and then use data api like
var val = $('.selected').data('val')

With jQuery you can use $(a).attr("data-val").
Without jQuery you can use a.getAttribute("data-val")

Try this approach
var dataValValue = $(".selected").attr("data-val");
It will get data-val attribute from first li from all li with class .selected

There are two ways, using jQuery and the first returned element in a:
$.data(a[0],"val");
$(a[0]).data("val");
Both are equivalent. Sorry, they're not equivalent, since the first one is lower level, and does not process data-* attributes by itself.
There's no need to use .attr() since data-* attributes are processed automatically in the case of the second one.

id to fields in jquery

I have a table and I have multiple text boxes in a column.I am add rows to the table using jquery clone method
var row = $('#nameTable tbody>tr:last').clone(true);
Now I want to add ids to the text fields of the new row.
Any help?

Just add attribute id to that new row object.
$(row).find('input').attr("id","newId");
Docs of attr()
note: Considering only one input element is there in your new object. If multiple input elements are there, you have to loop on them and have assign individual id's to them, Since Id must be unique.

Try with this
var row = $('#nameTable tbody>tr:last').clone(true);
row.find("#someInput").attr("id","someInput_2");

Since you referring to text fields you can make use of this selector
$(row).find('input[type=text]').each(function(element) {
element.attr("id","newId");
})

For set multiple IDs use (be careful, because ID must be unique):
var row = $('#nameTable tbody>tr:last').clone(true);
row.find(':text').each(function () {
this.id = 'new_id' + Math.random();
});
I prefer access to ID via pure javascript instead of jquery http://jsperf.com/browser-diet-this-attr-id-vs-this-id/12

Get elements by data attribute and part of id in jQuery

I need to get elements by data attribute and part of id in jQuery.
I have following code.
<div class="bridgeSelectedDiv" id="bridgeDiv_13234" onclick="SelectBridgeLine(this);" data-bridgeuid="b2a42066-00e2-4b6e-bdef-397468573b75"></div>
<div class="bridgeSelectedDiv" id="bridgeDiv_13432" onclick="SelectBridgeLine(this);" data-bridgeuid="b2a42066-00e2-4b6e-bdef-397468573b75"></div>
<div class="bridgeSelectedDiv" id="bridgeDiv_45646" onclick="SelectBridgeLine(this);" data-bridgeuid="b2a42066-00e2-4b6e-bdef-397468573b75"></div>
function SelectBridgeLine(element) {
var bridgeuid = $(element).attr("data-bridgeuid");
var partofSelectedBridgeLine = $('div[id^="bridgeDiv_"]').data("bridgeuid");
console.log(partofSelectedBridgeLine);
}
But it returns only 1 element not all of them.
Any clue? Thank you!

From the docs of .data()
Store arbitrary data associated with the matched elements or return the value at the named data store for the first element in the set of matched elements.
So whats happening here is it gets the data value for first element only. You need to iterate over them using .each() to get for all elements in matched selector:
$('div[id^="bridgeDiv_"]').each(function(){
console.log($(this).data('bridgeuid'))
});
Demo

It returns only 1 element because you are doing onclick="SelectBridgeLine(this);", and this will always point to current element on which the click handler exists, instead do:
$('.bridgeSelectedDiv').click(function(){
console.log($(this).data('bridgeuid')); //you can use .data()
});
or
$('div[id^="bridgeDiv_"]').click(function() {
console.log($(this).data('bridgeuid'));
});

Try
$('div[id^="bridgeDiv_"]').each(function(){
console.log($(this).data("bridgeuid")); });

How to get the relevant 'this' object in jquery?

here's the snippet of code I have:
$(".block").mouseover(function() {
$("#block_title").html("title"));
});
Each div of class .block has a data-title attribute (value of each data-title attribute is different). I want to be able to access this data-title attribute inside my anonymous function.

You can access it using the .data method:
$(".block").mouseover(function() {
...
$("#block_title").html($(this).data('title'));
});

You can use the .data() function in jQuery
$(".block").mouseover(function() {
$("#block_title").html($(this).data('title'));
});

You may be referring to this code.
$('.block').attr('data-title', 'This is a random value');
According to the jQuery API documentation:
Get the value of an attribute for the first element in the set of matched elements or set one or more attributes for every matched element.
I hope this answers your question.

If you mean you have an HTML5 data- attribute:
$(".block").mouseover(function() {
$("#block_title").html( $(this).attr("data-title") ); //data-title value
});
Or, if you mean you have a title property in the jQuery arbitrary data:
$(".block").mouseover(function() {
$("#block_title").html( $(this).data("title") ); //title value in the data object
});

Is this the correct way to set an id for an element that doesn't have an id yet in jQuery?

$("a[href*='http://www.google.com']").attr('id','newId');
Can only reference it by href.

Yes, that's the correct way to add an id attribute to an element that doesn't already have one.
However you should ensure that there's only one matching element, as it's incorrect to have two elements with the same ID on a page, e.g.:
$("a[href*='http://www.google.com']").first().attr('id', 'newId');
This would, of course, still leave you with the problem of what to do with the remaining matching elements, if any. A possible solution would be:
$("a[href*='http://www.google.com']").attr('id', function(index, attr) {
return 'newId_' + index;
});
which will assign the elements the IDs newId_0, newId_1, etc.