如何从对象内部类名中获取 id 值？答案

【问题标题】：How to get id values from object inner class name?如何从对象内部类名中获取 id 值？
【发布时间】：2021-09-02 15:57:11
【问题描述】：

我有一个由 javascript 创建的页面，并且我有这些字段。如何仅从这样的类对象中导航和获取内部值？

<li class="tdays" id="23 8 2021">
  <div class="info">Quinta</div>
  <div class="date">23</div>
  <div class="ev" id="562">
    <div class="ev-desc">
      <p>undefined</p>
    </div>
  </div>
</li>

我想去div class="ev" id="562"

我现在的代码是

$(document).ready(function() {
  var elements = document.getElementsByClassName("tdays");
  $('.tdays').click(function() {
    // console.log(this.id);
    // console.log(this.value)
    console.log(this[0]);
  });
});

【问题讨论】：

您需要获取所有子 div 元素吗？
document.querySelectorAll('.tdays [id].ev').forEach(node => console.log(node.id)) ...另见querySelectorAll

标签： javascript jquery mobile calendar

【解决方案1】：

首先，请注意.tdays 元素上的id 属性无效——id 不能包含空格。

要执行您需要的操作，您可以使用 jQuery 的 DOM 遍历方法找到与单击的 .tdays 元素相关的 .ev 并读取其 id。在这种情况下，您可以使用children() 或find()：

$(document).ready(function() {
  $('.tdays').on('click', function() {
    let evId = $(this).children('.ev').prop('id');
    console.log(evId);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li class="tdays" id="23 8 2021">
    <div class="info">Quinta</div>
    <div class="date">23</div>
    <div class="ev" id="562">
      <div class="ev-desc">
        <p>undefined</p>
      </div>
    </div>
  </li>
  <li class="tdays" id="02 9 2021">
    <div class="info">Quinta</div>
    <div class="date">02</div>
    <div class="ev" id="121">
      <div class="ev-desc">
        <p>undefined</p>
      </div>
    </div>
  </li>
</ul>

【讨论】：

谢谢亲爱的罗里

【解决方案2】：

如果 OP 考虑尝试使用 DOM Api，尤其是 querySelector 和 querySelectorAll ...

function handleTDaysClick(evt) {
  const elmTDays = evt.currentTarget;
  const evNode = elmTDays.querySelector('[id].ev');

  console.log(evNode.id);
}
document
  .querySelectorAll('.tdays')
  .forEach(node =>
    node.addEventListener('click', handleTDaysClick)
  );

.as-console-wrapper {
  min-height: 100%!important;
  top: 0;
  left: auto!important;
  width: 50%!important;
}

<ul>
  <li class="tdays" id="23-8-2021">
    <div class="info">Quinta</div>
    <div class="date">23</div>
    <div class="ev" id="562">
      <div class="ev-desc">
        <p>undefined</p>
      </div>
    </div>
  </li>
  <li class="tdays" id="02-9-2021">
    <div class="info">Quinta</div>
    <div class="date">02</div>
    <div class="ev" id="121">
      <div class="ev-desc">
        <p>undefined</p>
      </div>
    </div>
  </li>
</ul>

【讨论】：

谢谢大家，
@PedroHenrique ... 说声谢谢很好。在 SO 中，鼓励 OP 也通过单击与该答案相关的“接受”链接/按钮来记下最有帮助的答案。