时间戳

首页 > 解决方案 > 在jquery中通过id、class和attr组合查找元素

javascript - 在jquery中通过id、class和attr组合查找元素

问题描述

我有以下代码：

$("#modal-bool-element").change(function(e) {boolSettings($(e.target))});

function boolSettings(e) {
  elem = e;
  var boolSettingsParent = elem.closest("#bool-settings");
  if (elem.is(":checked") == true) {
    elem.val(true);
    boolSettingsParent.find("#modal-bool-show").prop("disabled", false);
  } else {
    elem.val(false);
    boolSettingsParent.find(".bool-reset, .bool-offset").hide();
    boolSettingsParent.find("#modal-bool-show").val("never");
    boolSettingsParent.find("#modal-bool-show").prop("disabled", true);
    boolSettingsParent.find("#modal-bool-offsetValue, #modal-bool-reset, #modal-bool-offsetUnit").val("");
  }
}

我想做的是将属性的值与类名或id一起传递给find方法。该属性是elem.attr("model-id").

我试过这样：

boolSettingsParent.find(`#modal-bool-show [model-id='{elem.attr(model-id)}']`)

但我没有得到任何价值。我怎样才能达到预期的效果？

标签： javascriptjquery

解决方案

删除空格：

boolSettingsParent.find(`#modal-bool-show[model-id='{elem.attr(model-id)}']`)
// −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−^

空格表示您正在寻找具有该属性的后代元素。#modal-bool-show没有空格，这意味着您只想要#modal-bool-show它也具有该属性值。

你提到了一个类，但没有显示选择一个。为此，您需要添加一个类选择器：

boolSettingsParent.find(`#modal-bool-show[model-id='{elem.attr(model-id)}'].some-class`)
// −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−^^^^^^^^^^^

但是id，除非您想跳过没有该属性和/或类的元素，否则只需应该就足够了，因为您在 DOM 中不能有多个具有相同元素的元素id - 这样做是无效的。因此，如果您希望选择器不匹配任何内容（如果具有该元素的元素id没有属性和/或类），则向选择器添加更多内容是可以的，但如果您这样做，则选择器匹配“正确”元素有了这个id，这是一个问题，因为这意味着你有多个相同的元素id。

我在上面假设您正在使用一些{...}为您处理的模板系统，但如果您打算在 JavaScript 的模板文字中使用替换，它们使用格式${...}，而不是{...}. 所以：

boolSettingsParent.find(`#modal-bool-show[model-id='${elem.attr(model-id)}'].some-class`)
// −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−^

推荐阅读