CODEWITHSUNDEEP
jquery
Tomislav Nikolić
Tomislav Nikolić

Reputation: 23

Getting element inside an element

Alright so I am trying to achieve something simple but it seems Its not working correctly. I am basically trying to get the value of the class thats inside the font awesome icon.

<div class='last_split'>
    <i class='fa fa-trash-o' aria-hidden='true'></i>
    <p style='display: none;' class='row_id'>".$row["ID"]."</p>
    <p style='display: none;' class='table_name'>".$txt."</p>
</div>

Now since there are many font awesome outputs like these, I need to find the one I clicked on. The problem I am facing now is simple, it doesnt return the value. It just returns an empty alert.

$(".fa-trash-o").click(function() {
    var id = $(this,".row_id").val();
    var table = $(".table_name").text();
    alert(id);
});

Upvotes: 0

Views: 48

Answers (4)

LoganRx
LoganRx

Reputation: 382

So the row_id class is not technically inside of it but a sibling of it, you would want to target it like this:

$(this).next('.row_id).text();
$(this).next('.table_name).text();

Since they are both <p> tags you should grab the .text or .html, .val() only works on form elements like an input or textarea

Upvotes: 1

Rory McCrossan
Rory McCrossan

Reputation: 337560

Firstly the contextual selector you're using is for finding one element within another, yet the p is not a child of the i, so it will not be found. Instead, you could use siblings().

Secondly, val() is used on form elements to get their value. p elements do not have a value. Presumably you want to get the text, so text() is what you need instead. Try this:

$(".fa-trash-o").click(function() {
    var id = $(this).siblings('.row_id').text();
    var table = $(".table_name").text();
    alert(id);
});

Upvotes: 0

epascarello
epascarello

Reputation: 207501

var id = $(this,".row_id").val(); makes no sense and paragraphs do not have a value

The element you want is a sibling so you should be using next() and text().

$(this).next().text()

or

 var id = $(this).siblings(".row_id").text();
 var table = $(this).siblings(".table_name").text();

Upvotes: 0

Rajaprabhu Aravindasamy
Rajaprabhu Aravindasamy

Reputation: 67187

You have to use siblings() or next() at this context not find(),

$(".fa-trash-o").click(function() {
 var id = $(this).next(".row_id").text();
 alert(id);
});

Also .val() is for input form elements, it will internally look for .value property. So we have to use .text() instead of that.

FYI : $(this, "selector") is similar to $(this).find('selector')

Upvotes: 1

Related Questions