Tengo muchos div con el atributo "valor de datos". Pero solo uno con el nombre de clase ".seleccionado". Necesito hacer selector con ambos. Datos + nombre de clase.
¿Cómo hacer un selector con atributo de datos y nombre de clase?
HTML
<div data-value="x">Click Me!</div> <div data-value="y">Click Me!</div> <div class='selected' data-value="z">Click Me!</div> <div data-value="w">Click Me!</div>jQuery
alert( $("div[data-value] .selected").data('value') ); // this is wrong way...Hay dos formas de obtener el atributo de data :
$(".selected").attr('data-value'); // It works for all type of custom attributeo
$(".selected").data('value'); // This one is specially for data attributePuedes hacer eso con attr() de jQuery:
alert($('div').attr('data-value'));Pero, como habrá más de un div, mejor darle una clase a cada uno (para ser más específicos):
<div class="clickable" data-value="x">Click Me!</div> <div class="clickable" id="second" data-value="y">Click Me!</div> <div class='selected clickable' data-value="z">Click Me!</div> <div class="clickable" data-value="w">Click Me!</div>y el jQuery será:
$('div.clickable').on('click', function(){ alert($(this).attr('data-value')); });Violín aquí: https://jsfiddle.net/hpb5u62e/
verifique el ejemplo de trabajo. He agregado un evento de clic para el botón
$(document).ready(function(){ $("button").click(function(){ alert( $(".selected").attr('data-value') ); }); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div data-value="x">Click Me!</div> <div data-value="y">Click Me!</div> <div class='selected' data-value="z">Click Me!</div> <div data-value="w">Click Me!</div> <button>Click me</button>