主页 / coding / 问题 / 79058395
Accepted
James B.
Asked: 2024-10-06 13:12:51 +0800 CST

jQuery 根据 id 和 class 匹配元素

  • 772

我需要捕获表单中的一些元素。这些元素如下所示：

<div id="wpforms-22603-field_17-container" class="wpforms-field wpforms-field-likert_scale" data-field-id="17">
<div id="wpforms-22603-field_18-container" class="wpforms-field wpforms-field-likert_scale" data-field-id="18">
<div id="wpforms-22603-field_19-container" class="wpforms-field wpforms-field-likert_scale" data-field-id="19">

变量部分是后面的数字-field_，当然还有data-field-id值本身。

所以我写了这个：

var elem = $(this).closest('[id^=wpforms-'+this_form_id+'-field_][id$=-container]');

其中this_form_id包含值22603。这很好用，但我还需要在匹配过程中指定一个类，这个类就是wpforms-field-likert_scale。

所以我尝试了这个：

var elem = $(this).closest('[id^=wpforms-'+this_form_id+'-field_][id$=-container] .wpforms-field-likert_scale');

这不起作用。我做错了什么？

jquery

2 个回答

  1. Best Answer

    删除.

    var elem = $(this)
  .closest(`[id^=wpforms-${this_form_id}-field_][id$=-container].wpforms-field-likert_scale`);

    或者使用过滤器

    var elem = $(this).closest('.wpforms-field-likert_scale')
  .filter(`[id^=wpforms-${this_form_id}-field_][id$=-container]`);


    const this_form_id = '22603';
$('button').on('click', function() {
  var elem = $(this).closest('.wpforms-field-likert_scale')
    .filter(`[id^=wpforms-${this_form_id}-field_][id$=-container]`);
    console.log(elem.attr('id'))
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div id="wpforms-22603-field_17-container" class="wpforms-field wpforms-field-likert_scale" data-field-id="17"><button>Click</button></div>
<div id="wpforms-22603-field_18-container" class="wpforms-field wpforms-field-likert_scale" data-field-id="18"><button>Click</button></div>
<div id="wpforms-22603-field_19-container" class="wpforms-field wpforms-field-likert_scale" data-field-id="19"><button>Click</button></div>

    • 2

  2. 您可以使用以下方式链接多个查找.end()

    $cotainer
  .find("selector")
  .end()
  .find("selector")
  .end()


    /*
wpforms-22603
-field_17
data-field-id="17"
wpforms-field-likert_scale
*/
$(document).ready(function () {
  var $matchMe = function ($cotainer, formId, fieldId) {
    return $cotainer
      .find("[id^='wpforms-" + formId + "']")
      .end()
      .find("[class*='-field_" + fieldId + "']")
      .end()
      .find('[data-field-id="' + fieldId + '"]')
      .end()
      .find(".wpforms-field-likert_scale")
      .end()
  }
  console.log($matchMe($("#container")).length)
})
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="container">
  <div
    id="wpforms-22603-field_17-container"
    class="wpforms-field wpforms-field-likert_scale"
    data-field-id="17"
  />
  <div
    id="wpforms-22603-field_18-container"
    class="wpforms-field wpforms-field-likert_scale"
    data-field-id="18"
  />
  <div
    id="wpforms-22603-field_19-container"
    class="wpforms-field wpforms-field-likert_scale"
    data-field-id="19"
  />
  <div
    id="wpforms-22603-field_19-container"
    class="wpforms-field wpforms-field-likert_scaleX"
    data-field-id="19"
  />
</div>

    • 0

相关问题