Как я могу получить текст внутри элемента внутри другого элемента по пользовательскому атрибуту

Question

Я пытаюсь получить текст элемента по его родительскому атрибуту (data-id) с помощью JQuery, однако я не могу его получить.

Вот что я пробовал до сих пор:

function getNum() {
  return "1234asd";
}

function show() {
  console.log($("tr[data-id="+getNum()+"] > td > label").text());
  //Console should print "Text1"
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr data-id="1234asd">
    <td>
      <label>Text1</label>
    </td>
    <td>
      <label>Text2</label>
    </td>
  </tr>
  <tr data-id="5678fgh">
    <td>
      <label>Text3</label>
    </td>
    <td>
      <label>Text4</label>
    </td>
  </tr>
</table>

<button onClick="show()">Click me</button>

Я ожидаю, что код напечатает Text1, но ничего не печатается (пустая строка).

Answer 1

Либо вы можете использовать подход, упомянутый Дипак Сингх , либо вы можете использовать .first() JQuery

HTML

<table>
    <tr data-id="1234asd">
        <td>
            <label>Text1</label>
        </td>
        <td>
            <label>Text2</label>
        </td>
    </tr>
</table>
<button onClick="show()">Click me</button>

JS

function getNum() {
  return "1234asd";
}

function show() {
  console.log($("tr[data-id="+getNum()+"] td").first().text());
  //Console prints "Text1"
}

Answer 2

Вам нужно настроить селектор, это может быть как:

$("tr[data-id="+getNum()+"] td:first label").text()

function getNum() {
  return "1234asd";
}

function show() {
  console.log($("tr[data-id=" + getNum() + "] td:first label").text());
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr data-id="1234asd">
    <td>
      <label>Text1</label>
    </td>
    <td>
      <label>Text2</label>
    </td>
  </tr>
  <tr data-id="5678fgh">
    <td>
      <label>Text3</label>
    </td>
    <td>
      <label>Text4</label>
    </td>
  </tr>
</table>

<button onClick="show()">Click me</button>

Answer 3

function getNum() {
  return "1234asd";
}

function show() {
  console.log($("tr[data-id="+getNum()+"] > td > label").text());
  //Console should print "Text1"
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr data-id="1234asd">
  <td>
    <label>Text1</label>
  </td>
  <td>
    <label>Text2</label>
  </td>
</tr>
</table>
<button onClick="show()">Click me</button>