accessing class inside another class using jquery

Question

<div class="gridmasonry grid_accomodation select_room">
             <div class="item_grid item2">
                 <div class="panel">
                     <div class="img_preview">
                         <h4 class="price"><span>&euro;20 </span>Night</h4>
                         <img src="~/Images/rooms/standard.jpg" alt="img_preview"  />
                     </div>
                     <div class="clsRoomType"><h4>Standart Room</h4></div>
                 </div>
             </div>
             <div class="item_grid item2">
                 <div class="panel">
                     <div class="img_preview">
                         <h4 class="price"><span>&euro;20 </span>Night</h4>
                         <img src="~/Images/rooms/luxury.jpg" alt="img_preview" />
                     </div>
                     <div class="clsRoomType"><h4>Luxury Room</h4></div>
                 </div>
             </div>
             <div class="item_grid item2">
                 <div class="panel">
                     <div class="img_preview">
                         <h4 class="price"><span>&euro;20 </span>Night</h4>
                         <img src="~/Images/rooms/family.jpg"  alt="img_preview"/>
                     </div>
                     <div class="clsRoomType"><h4>Family Room</h4></div>
                 </div>
             </div>
             <div class="item_grid item2">
                 <div class="panel">
                     <div class="img_preview">
                         <h4 class="price"><span>&euro;20 </span>Night</h4>
                         <img src="~/Images/rooms/vip.jpg"  alt="img_preview"/>
                     </div>
                     <div class="clsRoomType"><h4>VIP Room</h4></div>
                 </div>
             </div>
             <div class="item_grid item2">
                 <div class="panel">
                     <div class="img_preview">
                         <h4 class="price"><span>&euro;20 </span>Night</h4>
                         <img src="~/Images/rooms/deluxe.jpg"  alt="img_preview"/>
                     </div>
                     <div class="clsRoomType"><h4>Deluxe Room</h4></div>
                 </div>
             </div>
             <div class="item_grid item2">
                 <div class="panel">
                     <div class="img_preview">
                         <h4 class="price"><span>&euro;20 </span>Night</h4>
                         <img src="~/Images/rooms/romantic.jpg" alt="img_preview" />
                     </div>
                     <div class="clsRoomType"><h4>Romantic Room</h4></div>
                 </div>
             </div>
         </div>

I have a structure of DIVs as above. I need to get the text of DIV with the class "clsRoomType" on each time when i click on a DIV item with the class "item_grid item2"

I tried the below code, but it shows the text of all items

 $(document).ready(function () {

        $(".item2").click(function () {
            alert($(".item2").find('div.clsRoomType').text());
        });
    });

Current result: Standart Room Luxury Room Family Room VIP Room...

I want each item on each click.

MysticMagicϡ · Accepted Answer · 2014-01-22 07:32:58Z

3

Replace

alert($(".item2").find('div.clsRoomType').text());

with

alert($(this).find('div.clsRoomType').text());

That will give individual item.

Hope this helps.

answered Jan 22, 2014 at 7:32

MysticMagicϡ

28.8k16 gold badges77 silver badges126 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Milind Anantwar · Accepted Answer · 2014-01-22 07:32:34Z

3

Try this:

 $(document).ready(function () {
    $(".item2").click(function () {
        alert($(this).find('div.clsRoomType').text());
    });
 });

answered Jan 22, 2014 at 7:32

Milind Anantwar

82.3k26 gold badges97 silver badges128 bronze badges

Comments

Pesulap · Accepted Answer · 2014-01-22 07:34:35Z

1

You have to look for a class in a given element

$(document).ready(function () {

    $(".item2").click(function () {
        alert($(this).find('div.clsRoomType').text());
    });
});

answered Jan 22, 2014 at 7:34

Pesulap

8948 silver badges19 bronze badges

1 Comment

Milind Anantwar Over a year ago

And how is that different.

Karthick Kumar · Accepted Answer · 2014-01-22 07:35:00Z

1

try this

$(document).ready(function () {

$(".item2").click(function () {
    alert($(this).find('div.clsRoomType').text());
});
});

Demo http://jsfiddle.net/mYa9c/

answered Jan 22, 2014 at 7:35

Karthick Kumar

2,3751 gold badge19 silver badges30 bronze badges

Collectives™ on Stack Overflow

accessing class inside another class using jquery

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related