CODEWITHSUNDEEP
jquery
Reddy
Reddy

Reputation: 1497

jQuery - set this Parent Element ID as a text

How can I display parent element id?

For Eg: Inside every span element, I want to display subgroup div's id as a text.

like : <span class="mpei">sg-1</span>

<div class="subgroup" id="sg-1">
  <span class="mpei"></span>
</div>
<div class="subgroup" id="sg-2">
  <span class="mpei"></span>
</div>
<div class="subgroup" id="sg-3">
  <span class="mpei"></span>
</div>
<div class="subgroup" id="sg-4">
  <span class="mpei"></span>
</div>

Upvotes: 0

Views: 266

Answers (6)

Tushar
Tushar

Reputation: 87233

You can use each to loop through all the div having class subgroup.

$('.subgroup').each(function() {
    $(this).children('.mpei').text($(this).attr('id'));
    // $(this).find('.mpei').text($(this).attr('id'));
});

$(this) inside each is the current element i.e. .subgroup.

Demo: http://jsfiddle.net/tusharj/jnsuc06j/

Upvotes: 2

Optimus
Optimus

Reputation: 2210

use jQuery each for iteration . try this

$('.mpei').each(function(){
   $(this).text($(this).parent().attr('id'));
});

Upvotes: 2

davidkonrad
davidkonrad

Reputation: 85578

You can do it like this :

$(".mpei").each(function() {
    $(this).text($(this).parent().attr('id'));
});

demo -> http://jsfiddle.net/s0f7xqyg/

Upvotes: 1

Shaunak D
Shaunak D

Reputation: 20646

Use .each() to iterate on <span> elements and then use prop() to get ID.

$('span.mpei').each(function(){
    $(this).text($(this).closest('.subgroup').prop('id'))
});


$('span.mpei').each(function(){
    $(this).text($(this).closest('.subgroup').prop('id'))
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="subgroup" id="sg-1">
  <span class="mpei"></span>
</div>
<div class="subgroup" id="sg-2">
  <span class="mpei"></span>
</div>
<div class="subgroup" id="sg-3">
  <span class="mpei"></span>
</div>
<div class="subgroup" id="sg-4">
  <span class="mpei"></span>
</div>

Upvotes: 2

Adil
Adil

Reputation: 148150

You can iterate through spans and get the parent element id to assign to text.

Live Demo

$('.mpei').each(function(){
   $(this).text($(this).parent().attr('id'));
});

Upvotes: 2

AmmarCSE
AmmarCSE

Reputation: 30607

  1. Iterate through each div with class .subgroup
  2. In each iteration find children .mpei
  3. Set their text() with attr('id')

$('.subgroup').each(function() {
  $(this).find('.mpei').text($(this).attr('id'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div class="subgroup" id="sg-1">
  <span class="mpei"></span>
</div>
<div class="subgroup" id="sg-2">
  <span class="mpei"></span>
</div>
<div class="subgroup" id="sg-3">
  <span class="mpei"></span>
</div>
<div class="subgroup" id="sg-4">
  <span class="mpei"></span>
</div>

Upvotes: 2

Related Questions