获取动态生成表的span标签内的文本？

Question

I have a dynamically generated page of an enterprise application. The data is inside table structure. I need to access a value of span tag inside this table.

 <table class="table table-bordered table-hover table-striped">
        <thead>
            ...
        </thead>
        <tbody>
            @foreach (var item in Model.Select((x, i) => new { Data = x, Index = i }))
            {
                <tr>
                    <td>@(item.Index + ((Model.PageNumber - 1) * Model.PageSize) + 1)</td>
                    <td>
                        **<span class="site-name">
                            @Html.DisplayFor(modelItem => item.Data.SITENAME)
                        </span>**  //Want to access item inside span
                    </td>

                    <td>@Html.DisplayFor(modelItem => item.Data.REMARKS)</td>
                    <td>

                        <a  href="@Url.Action("Delete", new { id = item.Data.ID })"
                            class="btn btn-sm btn-danger delete-site">
                            <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
                        </a>
                    </td>

                </tr>
            }
        </tbody>

Jquery looks like this

 $(document).on("click", ".delete-site", function (e) {
            var item = $(this);
            var name = $(item.closest("span[class='site-name']"));
            alert(name.text());                
            return false;
        });

Here i am getting an empty alertbox.

How can I get the value which is inside span tag using jquery??

Answer 1

Replace this:

var name = $(item.closest("span[class='site-name']"));

With this:

var name = $(item.closest("tr").find("span[class='site-name']"));

---

Because .site-name span isn't inside your parent td, so use closest to use nearest parent tr of having .site-name and then use find to get the element

Answer 2

Try This

 $(document).on("click", ".delete-site", function (e) {
            var item = $(this);
            var name = $(item).find("span[class='site-name']");
            alert(name.text());                
            return false;
        });

Answer 3

Try this

$(document).on("click", ".delete-site", function (e) {
            var item = $(this);
            var name = item.closest("span").find("site-name");
            alert(name.text());                
            return false;
        });

Answer 4

What you need is to find the closest <tr> and then find the span

$(document).on("click", ".delete-site", function(e) {
    var item = $(this);
    var name = item.closest("tr").find("td span[class='site-name']");
    alert(name.text());
    return false; 
});