We Keep Coding

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 read element value from function

I want to make all elements with class "reaction" react on click and I need to read element value.
in document ready I put
$(".reaction").click(function() {
console.log(this.value);
});
but I cannot read value. How to read element on this way ?

This should work if the matching elements have a "value" attribute:
$(".reaction").click(function() {
console.log($(this).val());
});

You can take attr value in pure element.
http://jsfiddle.net/9Rw2p/2/

Just try this:
$(".reaction").click(function() {
console.log(this.textContent);
});
It works fine for me

Add data attribute to table cell

Is it possible to add a data attribute to a table cell using jquery? I have the following but it doesn't add a data-attribute to the td.
$("td.row").each(function( index ) {
$(this).data("rowid",index);
});
Any ideas?

.data() allows you to store data associated with an element. It does allow you to get the data from element with an already set data-* attribute, but it doesn't actually allow you to add data-* attributes to an element.
.attr() allows you to add this attribute though.
$("td.row").each(function( index ) {
$(this).attr("data-rowid", index);
});
You can also use #CrazyTrain's solution which seems a little more efficient:
$("td.row").attr("data-rowid", function(index) {
return index;
});

Does jQuery attr allow for non standards?

I am already using id and title but i need to parse through 2 more bits...
$(this).attr("title"); $(this).attr("id");
Will $(this).attr("custom1"); work ??

yes, and BTW you can set multiple attributes at once:
$('.myselector').attr({
src: 'thefile.gif',
width: 200,
height: 300 });

Yes, and you can use it for all of the data-attributes in HTML5. Which is the preferrable way to add extra attributes.
Additionally, all data-* attributes are automatically added to jQuery's data() object for easy access

If you just want to associate (by name) some data with a DOM element, you're better off using the ".data()" method:
$(this).data('custom1', someValue);
The ".data()" API makes HTML5-style "data-foo" attributes coded into the HTML accessible:
var foo = $(this).data('foo'); // gets the "data-foo" attribute value from element

Yes it works, but it's not a good idea.
Better use .data('foo', 'bar'); if you want to store some data on an element.

Yes, and the best thing you can do is just test it.
<script>
$(document).ready(function() {
// Handler for .ready() called.
alert( "custom1 = " + $("#myField").attr("custom1") );
});
</script>
<div id="myField" custom1="My Custom Field"></div>
Now, you are breaking markup, so I would suggest storing your info in ALT tags or NAME tags to prevent that ().

Can you use jQuery's $(this) in a one-line code to modify elements?

I'm working on a placeholder function in jquery. Right now, I just want the form element to change its value to whatever its placeholder is. I tried the following code:
$('input:text').val($(this).attr('placeholder'));
But it doesn't work. After testing it a little, I realized the problem is with using $(this) in that context. How can I change this so that it will loop through all form elements and change their value to their placeholder attribute?

$('input:text').val(function() {
return $(this).attr('placeholder');
});
or:
$('input:text').attr('value', function() {
return $(this).attr('placeholder');
});
And here's a live demo.

Most of these setter jQuery functions provide a way to specify a function whose return value will be used. This is a way to make use of $(this).
$('input:text').val(function () {
return $(this).attr('placeholder');
});
jQuery val() Reference