如何用AJAX查找HTML指定类首个元素及jQuery相关DOM操作问题

假设你已经能访问目标HTML的DOM（如果是外部HTML，参考问题1的方法先加载），下面分别实现两个需求：

需求A：获取带有item类的最后一个li元素 #

直接用类选择器结合.last()方法就能搞定，代码很直观：

// 当前页面DOM的情况
const $lastItemLi = $("li.item").last();

// 如果是外部加载的HTML，就换成下面这行
// const $lastItemLi = $loadedContent.find("li.item").last();

// 验证结果
if ($lastItemLi.length) {
  console.log("最后一个带item类的li元素：", $lastItemLi);
  // 比如获取它的文本内容：$lastItemLi.text()
} else {
  console.log("页面里没有带item类的li元素");
}

需求B：判断带有item类的首个li元素中是否存在带有itemImg类的div元素 #

先定位到首个li.item，再在它内部查找div.itemImg，通过判断元素的长度是否大于0就能知道是否存在：

// 当前页面DOM的情况
const $firstItemLi = $("li.item").first();
const hasItemImgDiv = $firstItemLi.find("div.itemImg").length > 0;

// 外部加载HTML的情况
// const $firstItemLi = $loadedContent.find("li.item").first();
// const hasItemImgDiv = $firstItemLi.find("div.itemImg").length > 0;

// 输出判断结果
if (hasItemImgDiv) {
  console.log("首个item类的li里确实有itemImg类的div");
} else {
  console.log("首个item类的li里没有找到itemImg类的div");
}

如果需要一次性处理外部HTML的两个需求，可以把代码整合到AJAX的回调里：

$.get("your-target.html", function(responseHtml) {
  const $loadedContent = $(responseHtml);
  
  // 处理需求A
  const $lastItemLi = $loadedContent.find("li.item").last();
  $lastItemLi.length && console.log("最后一个li.item：", $lastItemLi);
  
  // 处理需求B
  const $firstItemLi = $loadedContent.find("li.item").first();
  const hasItemImg = $firstItemLi.find("div.itemImg").length > 0;
  console.log("首个li.item是否包含div.itemImg：", hasItemImg);
}).fail(function() {
  console.error("加载HTML文件失败啦");
});

内容的提问来源于stack exchange，提问作者peter