使用jQuery定位类时，您需要具体的具体内容？

Question

我有一个简单的each()无法正常工作，过去我发现有时候元素嵌套太深，你需要更具体。我试图找出是否需要div或其他标识符取决于某些级别？

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

<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

问题不在于您的选择器，或某些＆＃34; max-depth＆＃34; DOM遍历的限制（顺便说一下，它不存在），问题出在你的HTML上。 .shortpoint-listitem-subtitle是一个div元素。 Div元素没有.val()。它们具有.text()，（当前）您需要从函数中的标签文本中解析出实际日期文本。另一个（我认为最好的）选项是将您的实际日期包装在span中，并为该特定类提供目标，并替换整个文本。

使用带有正则表达式模式的String.prototype.replace()替换日期：

＆＃13;

＆＃13;

$('.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");
});

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

$('.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");
});

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

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);

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;