使用 Jquery 获取 data-fieldname 属性的子/子元素的值

Question

I am trying to fetch the value of the child element of the html data attribute. It returns me object when i call in console

$("td").find("[data-fieldname='name']").children("span")

but i am not able to fetch the value and it returns undefined when i call

$("td").find("[data-fieldname='name']").children("span").val()

Can someone suggest me where I am doing wrong? I have no other distinct way, to select the required span.

Case Html

<pre>
    <td class="listViewEntryValue medium vte-hover-edit-container" data-field-type="string" nowrap="" data-fieldname="name" data-columnname="name" style="position: relative;">
        <span class="vte-display-value dm-test">Mariana Scavelli</span>
        <span class="vte-edit-show-btn cursorPointer" style="position: absolute; right: 0px; display: none;">&nbsp;<i title="Edit" class="icon-pencil"></i></span>
    </td>
</pre>

$("td").find("[data-fieldname='name']").children("span").val()

Answer 1

to loop trough all span child elements and get the text inside the span:

$("td").find("[data-fieldname='name']").children("span").each(function(){
    let text = $(this).text();
});

to loop trough all span child elements and get the name of the element use:

$("td").find("[data-fieldname='name']").children("span").each(function(){
    let name = $(this).attr('name');
});

span is not an input element and doesn't have a value. .text() gets the text inside the span element. Span supports only HTML Global Attributes. More information about these attributes can be read here.

https://www.w3schools.com/tags/ref_standardattributes.asp

As you can see name is not listed here. Therefore name is not supported on span elements in both the html 4.01 and 5 standards. Most likely it will work in most browsers but some browsers that are more strict on the standard might cause issues with your code.