Retrieve label value using jQuery

Navigation
1

I have the following line, I am using this to know the id but it gives me empty 

$(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>

How can I recover the value of the label right on the button that I press, for example if I press on row 3, that I retrieve the id from 3.

    
asked by Baker1562 17.04.2018 в 06:29
source

2 answers

1

Depending on the structure of your code, you would have at least two search options of label .

1.- Obtain the first parent element with closest () the class text_holder and then search for the sibling element with siblings () to get to the label with your class .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.- Obtain the first parent element with closest () the class list-group-item and then search for the child element with find () to get to the label with your class .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>
    
answered by 17.04.2018 / 06:56
source
1

The .find() returns a list, even a single item, to access that first item is used .first() : 

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

This though better, it would not work because the find() called from button will search within <button> so you would have to scale the parents of the element to find the <label> with class id , this can be done with several .parent() chained, going up one level at a time ... or using .closest() 

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

Although if you can change the HTML you might want to use a data attribute and simplify the subject: 

<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'));
});

You can put the data-id in the button but since there is another button you would have to repeat it in that too.

    
answered by 17.04.2018 в 07:08
Problem ArrayList - C # Divide arrays knowing the length that needs to be obtained