1

Tengo la siguiente linea , Estoy usando esto para saber el id pero me da vació

$(document).on('click', '.editRuta', function () {
  alert($(this).find('.id').text());
});
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class='list-group-item'>
	<label class="id" hidden>1</label>

	<div class='text_holder'> 
		Corriente
		<div class='btn-group pull-right'>
			<button class='deleteRuta btn btn-warning'>
				Borrar
			</button>
			<button class='editRuta btn btn-success'>
			Editar
			</button>
		</div>
	</div>
	<br />
</li>

Como puedo recuperar el valor del labeljusto en el botón que presiono, por ejemplo si presiono en la fila 3, que me recupere el id de la 3.

2 respuestas 2

1

Según la estructura de su código tendría al menos dos opciones de búsqueda del label.

1.- Obtener el primer elemento padre con closest() la clase text_holder y luego buscar el elemento hermano con siblings() para llegar al label con su clase .id.

$(document).on('click', '.editRuta', function () {
	console.log($(this).closest('.text_holder').siblings('.id').text());
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class='list-group-item'>
	<label class="id" hidden>1</label>

	<div class='text_holder'> 
		Corriente
		<div class='btn-group pull-right'>
			<button class='deleteRuta btn btn-warning'>
				Borrar
			</button>
			<button class='editRuta btn btn-success'>
			Editar
			</button>
		</div>
	</div>
	<br />
</li>

<li class='list-group-item'>
	<label class="id" hidden>2</label>

	<div class='text_holder'> 
		Corriente
		<div class='btn-group pull-right'>
			<button class='deleteRuta btn btn-warning'>
				Borrar
			</button>
			<button class='editRuta btn btn-success'>
			Editar
			</button>
		</div>
	</div>
	<br />
</li>

<li class='list-group-item'>
	<label class="id" hidden>3</label>

	<div class='text_holder'> 
		Corriente
		<div class='btn-group pull-right'>
			<button class='deleteRuta btn btn-warning'>
				Borrar
			</button>
			<button class='editRuta btn btn-success'>
			Editar
			</button>
		</div>
	</div>
	<br />
</li>

1.- Obtener el primer elemento padre con closest() la clase list-group-item y luego buscar el elemento hijo con find() para llegar al label con su clase .id.

$(document).on('click', '.editRuta', function () {
	console.log($(this).closest('.list-group-item').find('.id').text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> 
<li class='list-group-item'>
	<label class="id" hidden>1</label>

	<div class='text_holder'> 
		Corriente
		<div class='btn-group pull-right'>
			<button class='deleteRuta btn btn-warning'>
				Borrar
			</button>
			<button class='editRuta btn btn-success'>
			Editar
			</button>
		</div>
	</div>
	<br />
</li>

<li class='list-group-item'>
	<label class="id" hidden>2</label>

	<div class='text_holder'> 
		Corriente
		<div class='btn-group pull-right'>
			<button class='deleteRuta btn btn-warning'>
				Borrar
			</button>
			<button class='editRuta btn btn-success'>
			Editar
			</button>
		</div>
	</div>
	<br />
</li>
<li class='list-group-item'>
	<label class="id" hidden>3</label>

	<div class='text_holder'> 
		Corriente
		<div class='btn-group pull-right'>
			<button class='deleteRuta btn btn-warning'>
				Borrar
			</button>
			<button class='editRuta btn btn-success'>
			Editar
			</button>
		</div>
	</div>
	<br />
</li>

1

El .find() te retorna una lista, aunque sea un solo ítem, para acceder a ese primer ítem se usa .first():

$(document).on('click', '.editRuta', function () {
    alert($(this).find('.id').first().text());
});

Esto así aunque mejor, no funcionaría pues el find() llamado desde el button va a buscar dentro del <button> así que tendrías que escalar los padres del elemento para encontrar el <label> con clase id, esto se puede hacer con varios .parent() encadenados, subiendo un nivel a la vez ... o usando .closest()

$(document).on('click', '.editRuta', function () {
    alert($(this).closest('LI').find('.id').first().text());
});

Aunque si podes cambiar el HTML tal vez te convenga usar un atributo data y simplificar el asunto:

<li class='list-group-item' data-id="1">
<div class='text_holder'> Corriente
  <div class='btn-group pull-right'>
    <button class='deleteRuta btn btn-warning'>Borrar</button>
    <button class='editRuta btn btn-success'>Editar</button>
  </div>
</div>
<br />
</li>

$(document).on('click', '.editRuta', function () {
    alert($(this).closest('LI').data('id'));
});

Se puede poner el data-id en el button pero como hay otro button tendrías que repetirlo en ese también.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.