javascript - 当使用 jQuery 定位类时，您需要具体到什么程度？

Question

我有一个简单的 each() ，但它不起作用，过去我发现有时元素嵌套得太深，您需要更具体。我想知道根据某些级别，您是否需要 div 或其他标识符？

我的目标是最终使用 shortpoint-list-item-subtitle 和 shortpoint-listitem-title 类遍历每个元素，并将 ISO 格式的日期替换为通过 Moment 读取日期。

<script type="text/javascript">
$( window ).load(function() {
    $('.shortpoint-listitem-subtitle').each(function() {
    var currentElement = $(this);
    var value=currentElement.val();
    console.log(value);     
});
});
</script>

据我所知，代码中没有任何内容不应该工作。然而，就像我说的 .shortpoint-listitem-subtitle 可能嵌套得太深。 value 的值未记录在控制台中。

这就是使用 Chrome 时选择器的样子

#shortpoint-gt-3-i-3 > div > div > div.sp-type-file-list-item.sp-attr-connect.shortpoint-dynamic.shortpoint-dynamic-loaded.sp-meta-allow-content.shortpoint-child.shortpoint-dynamic-block.shortpoint-listitem.shortpoint-dynamic-514 > div > div.shortpoint-listitem-content > div.shortpoint-listitem-description

底层 HTML

https://pastebin.com/ZkXRHNB1

<script type="text/javascript">


var timeout = null;
function waitForDom () {
  console.log("Checking DOM...");
  // check for the elements you expect to exist
  if ($(".shortpoint-listitem-subtitle").length) {
    $(".shortpoint-tab-title").click(function() {waitForDom();});
    clearTimeout(timeout);
    formatDates();
  }
  else {
    // adjust timeout time to whatever feels appropriate to you
    timeout = setTimeout(waitForDom, 500);
  }
}

waitForDom();

function formatDates() {
$('.shortpoint-listitem-subtitle, .shortpoint-listitem-description').each(function() {
  var currentElement = $(this);
  var value=currentElement.text();
  var dateParseRegex = /\d\d\d\d[-]\d\d[-]\d\d[T]\d\d[:]\d\d:\d\d[.]\d{7}[Z]/g;
  var formattedDate = value.replace(dateParseRegex, function (match) {
    return moment(match).format("MMMM Do YYYY, h:mm:ss a");
  });
  currentElement.text(formattedDate);  
});
}

setTimeout(function () {
  var content = '';
  $(".content").append(content);
}, 2300);
</script>

Answer 1

问题不在于你的选择器，也不在于 DOM 遍历的某些“最大深度”限制(顺便说一下，这并不存在)，问题在于你的 HTML。 .shortpoint-listitem-subtitle是一个div元素。 Div 元素没有 .val() 。他们有.text() ，(目前)您需要从函数中的标签文本中解析出实际的日期文本。另一个(我认为最好的)选择是将您的实际日期包装在 span 中。并为其指定一个特定的类，以该类为目标，然后替换整个文本。

使用 String.prototype.replace()用正则表达式模式替换日期:

$('.shortpoint-listitem-subtitle, .shortpoint-listitem-description').each(function() {
  var currentElement = $(this);
  var value=currentElement.text();
  var dateParseRegex = /\d\d\d\d[-]\d\d[-]\d\d[T]\d\d[:]\d\d:\d\d[.]\d{7}[Z]/g;
  var formattedDate = value.replace(dateParseRegex, function (match) {
    return moment(match).format("MMMM Do YYYY, h:mm:ss a");
  });
  currentElement.text(formattedDate);  
  console.log("Old Value: ", value);
  console.log("New Value: ", formattedDate);
  console.log("\n");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
<div class="shortpoint-listitem-subtitle" style="color: rgb(163, 180, 156);">Created by: Joe on 2018-02-01T19:20:46.0000000Z</div>
<div class="shortpoint-listitem-description">Last Modified: 2018-02-08T21:14:25.0000000Z by Tom</div>

使用 <span>保存每个日期的内容:

$('.date').each(function() {
  var currentElement = $(this);
  var value=currentElement.text();
  var formattedDate = moment(value).format("MMMM Do YYYY, h:mm:ss a");
  currentElement.text(formattedDate);  
  console.log("Old Value: ", value);
  console.log("New Value: ", formattedDate);
  console.log("\n");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
<div class="shortpoint-listitem-subtitle" style="color: rgb(163, 180, 156);">Created by: Joe on <span class="date">2018-02-01T19:20:46.0000000Z</span></div>
<div class="shortpoint-listitem-description">Last Modified: <span class="date">2018-02-08T21:14:25.0000000Z</span> by Tom</div>

为了处理页面上内容加载的不可控异步性，您可以循环超时，直到元素存在，此时您可以格式化日期并退出超时循环，如下所示:

var timeout = null;
function waitForDom () {
  console.log("Checking DOM...");
  // check for the elements you expect to exist
  if ($(".date").length) {
    clearTimeout(timeout);
    formatDates();
  }
  else {
    // adjust timeout time to whatever feels appropriate to you
    timeout = setTimeout(waitForDom, 500);
  }
}

waitForDom();

function formatDates() {
  $('.date').each(function() {
    var currentElement = $(this);
    var value=currentElement.text();
    var formattedDate = moment(value).format("MMMM Do YYYY, h:mm:ss a");
    currentElement.text(formattedDate);  
    console.log("Old Value: ", value);
    console.log("New Value: ", formattedDate);
    console.log("\n");
  });
}

// use event delegation to register click handlers on dynamically created elements
$(document).on("click", ".shortpoint-tab-title", function () {
  waitForDom();
});

setTimeout(function () {
  var content = '<div class="shortpoint-listitem-subtitle" style="color: rgb(163, 180, 156);">Created by: Joe on <span class="date">2018-02-01T19:20:46.0000000Z</span></div><div class="shortpoint-listitem-description">Last Modified: <span class="date">2018-02-08T21:14:25.0000000Z</span> by Tom</div>';
  $(".content").append(content);
}, 2300);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
<div class="content"></div>