Question

我想要选择页面上显示的形式为volume_header_ + id＃的div id的第一个实例。如果我明确地输入了id＃，例如volume_header_123，则代码可以正常工作。但是当我尝试用通用选择器替换它来选择第一次出现时，不管id是什么，一切都会中断。

<div class="volume_wrapper">
  <div id="volume_header_123" class="volume_header">
    …
  </div> //end volume_header_123
  <div id="volume_issues_123" class="volume_issues" style="display: block;">
    <div class="issue_wrapper">
      <div id="issue_header_123_6" class="issue_header">
        …
      </div> //end issue_header_123_6
      <div id="issue_toc_123_6" class="issue_toc" style="display: none;">
        <div class="toc_item">
          …
        </div> //end toc_item
      </div> //end issue_toc_123_6
    </div> //end issue_wrapper
  </div> //end volume_issues_123
</div> //end volume_wrapper

以下代码在明确说明div id时正常工作，但我需要将其设置为通用，以便它选择第一个匹配项，而不管volume_header_或volume_issues_末尾附加的id＃

      jQuery('#volume_header_123').css('border-bottom', '1px solid #cc0000');
      jQuery('#volume_header_123').addClass('selected');
      jQuery('#volume_issues_123').slideDown(50);

我已经尝试过.eq（0），首先和其他几个选择器根据本网站上给出的其他一些答案，但我似乎无法找到正确的语法。

Answer 1

或者您可以将此代码用作子选择器：

    $('.volume_wrapper > .volume_header');

Answer 2

这样的事情可行：

$( "div[id^='volume_issues_']" ).first();

检查doc：http://api.jquery.com/attribute-starts-with-selector/。属性从选择器

开始

Answer 3

$（＆＃34; .volume_header＆＃34;）。first（）。hide（）

这是使用类volume_header选择第一个元素然后隐藏它。用您所需的函数调用替换隐藏调用。

在使用动态ID时，只需引用带有类名的第一个元素

Answer 4

看看这个小提琴：
http://jsfiddle.net/6wp44kc3/
在我的例子中，我使用：

$("p", "div").eq(0).html("ha");

我使用eq在div元素的范围内选择第一个段落标记。然后我将段落标记的html设置为ha。以这种方式使用eq将允许您选择第一个元素。

Answer 5

其他选择：

$($("div").get(0)).hide();

JQuery - 在页面上选择div类id的第一个实例

5 个答案: