Question

我想使用jQuery选择DOM。

HTML代码

NullPointerException

我想选择“检查”类别跨越DOM，“标签”在同一级别中具有“高”标题。

我尝试使用此查询单击该DOM：

Option(...)

但此代码只有第一个匹配值。

如何选择所有DOM？

我的错误。我想“检查”而不是“骗局”。感谢。

这个问题的重点是“所有”DOM应该点击“高”标题attr。

Answer 1

您可以使用.closest().find()

$('a[title="high"]').each(function() {
  $(this).closest('.node').find('.con').click();
})

Working Demo

Answer 2

您可以使用filter()根据条件过滤掉集合中的元素。

// Get all spans having class `con`
$('span.con').filter(function () {
    // If this element has anchor element sibling with `high` as Title
    // then return true, else return false
    return $(this).siblings('a[title="high"]').length;
}).css('color', 'green');

＆＃13;

$('span.con').filter(function() {
  return $(this).siblings('a[title="high"]').length;
}).css('color', 'green');

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
  <li>
    <span class="node">
    <span class="con">First</span>
    <span class="check"></span>
    <img>
    <a title="high">abc</a>
    </span>
  </li>
  <li>
    <span class="node">
    <span class="con">Second</span>
    <span class="check"></span>
    <img>
    <a title="high">def</a>
    </span>
  </li>
  <li>
    <span class="node">
    <span class="con">Third</span>
    <span class="check"></span>
    <img>
    <a title="low">zwc</a>
    </span>
  </li>
</ul>

＆＃13;

Answer 3

而不是.prev().prev()使用siblings()查找同一级别的项目，并使用.con进行过滤。

$('a[title="high"]').each(function() {
  $(this).siblings('.con').click();
});

如果您想知道为什么您的代码实际无效，您已拨打prev()两次。首先选择img，第二个选择.check。因此，您需要第三次致电prev()才能到达.con。这总是令人困惑，如果在中间添加更多元素，可能会随时中断。这就是为什么不推荐这种方法的原因。

Answer 4

由于CSS和jQuery没有以前的兄弟选择器，您可以使用常规兄弟选择器。

您可以使用General sibling selectors选择具有特定属性的元素，然后使用jQuery的sibling()选择JTextArea。

span.con

选择器$('span.check ~ a[title="high"]') // Select all anchors having `title` as "high" // Which are next siblings of `span` having class of `check` .siblings('span.check') // Select sibling `span` having class `con` .css('color', 'green');将选择锚元素，以获取$('span.check ~ a[title="high"]')，使用span。

siblings

$('span.check ~ a[title="high"]')
  .siblings('span.check')
  .each(function() {
    $(this).css('color', 'green').click();
  });

Answer 5

实际上你的代码工作正常。看我试过这个， HTML：

<li>
<span class="node>
<span class="con"></span>
<span class="check" onclick="console.log('span :'+1);"></span>
<img onclick="console.log('img :'+1);">
<a id = "m1" title="high" onclick="console.log('a :'+1);">abc</a>
</span>
</li>
<li>
<span class="node>
<span class="con"></span>
<span class="check" onclick="console.log('span :'+2);"></span>
<img onclick="console.log('img :'+2);">
<a id = "m2" title="high" onclick="console.log('a : '+2);">def</a>
</span>
</li>
<li>
<span class="node>
<span class="con"></span>
<span class="check" onclick="console.log('span : low');"></span>
<img onclick="console.log('img : low');">
<a id = "m3" title="low" onclick="console.log('low');">zwc</a>
</span>
</li>

JS：

$(function(){
$('a[title="high"]').each(function() {
        // if you want to click all <a>
        $(this).click();
        // if you want to click all <img>
        $(this).prev().click();
        // if you want to click all <span> having class check
        $(this).prev().prev().click();
    });});

控制台：

a :1
img :1
span :1
a : 2
img :2
span :2

jQuery选择多个相同的属性值

5 个答案: