jQuery select multiple same attribute value

Question

I want select DOMs using jQuery.

HTML code

<li>
  <span class="node>
    <span class="con"></span>
    <span class="check"></span>
    <img>
    <a title="high">abc</a>
  </span>
</li>
<li>
  <span class="node>
    <span class="con"></span>
    <span class="check"></span>
    <img>
    <a title="high">def</a>
  </span>
</li>
<li>
  <span class="node>
    <span class="con"></span>
    <span class="check"></span>
    <img>
    <a title="low">zwc</a>
  </span>
</li>

I want select "check" class span DOMs what have "a tag" has "high" title in same level.

I tried to click that DOMs using this query:

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

but this code have only first match value.

How can I select all DOMs?

My mistake. I want "check" not "con". Thanks.

The point of this question is "all" DOMs what have "high" title attr should be clicked.

Mohamed-Yousef · Accepted Answer · 2015-12-30 03:38:11Z

1

you can use .closest().find()

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

Working Demo

edited Dec 30, 2015 at 3:38

answered Dec 30, 2015 at 3:12

Mohamed-Yousef

24k3 gold badges21 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Robert Moon Over a year ago

This code is working but return only first match. All DOMs what have a "high" title should be clicked.

Mohamed-Yousef Over a year ago

@RobertMoon did you check the demo?? Its already returned all not just first

Robert Moon Over a year ago

Oh yes, the demo work well. I think there is a code block loop after click event. I'll find that. Thanks.

Tushar · Accepted Answer · 2015-12-30 03:15:09Z

You can use filter() to filter out elements from a set based on condition.

// 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');

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

<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>

Tᴀʀᴇǫ Mᴀʜᴍᴏᴏᴅ · Accepted Answer · 2015-12-30 03:22:27Z

1

Instead of .prev().prev() use siblings() to find the items in the same level and filter with .con.

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

If you want to know why actually your code is not working, you called prev() two times. By first one you select img, the second one will select .check. So you need to call prev() third time to reach .con. This is always confusing and may break anytime if you add more element in between. That's why this approach is not recommended.

edited Dec 30, 2015 at 3:22

answered Dec 30, 2015 at 3:16

Tᴀʀᴇǫ Mᴀʜᴍᴏᴏᴅ

4,2261 gold badge27 silver badges55 bronze badges

1 Comment

Robert Moon Over a year ago

This code return only first match. Because of my fault, your comment is right but this code is not work after I fixed that point.

Tushar · Accepted Answer · 2015-12-30 06:13:40Z

1

As CSS and jQuery don't have previous sibling selector, you can use General sibling selector.

You can use General sibling selectors to select elements having specific attribute and then use jQuery's sibling() to select 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');

The selector $('span.check ~ a[title="high"]') will select anchor elements, to get the span, use siblings.

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

<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">First Check</span>
    <img>
    <a title="high">abc</a>
    </span>
  </li>
  <li>
    <span class="node">
    <span class="con">Second</span>
    <span class="check">Second Check</span>
    <img>
    <a title="high">def</a>
    </span>
  </li>
  <li>
    <span class="node">
    <span class="con">Third</span>
    <span class="check">Third Check</span>
    <img>
    <a title="low">zwc</a>
    </span>
  </li>
</ul>

edited Dec 30, 2015 at 6:13

answered Dec 30, 2015 at 3:22

Tushar

87.4k21 gold badges164 silver badges182 bronze badges

3 Comments

Robert Moon Over a year ago

As your explain, I wrote a code like this : $('span.check ~ a[title="high"]').siblings('span.check').click(); but this code check only first match. All DOMs should be checked.

Tushar Over a year ago

@RobertMoon You can iterate over the collection using each and use .click inside it.

Robert Moon Over a year ago

Oh yes, I did. $('span.node ~ a[title="high"]').each(function () { $(this).siblings('span.check').click(); }); But not work.

Maddy · Accepted Answer · 2015-12-30 06:14:26Z

Actually your code is working fine. See I tried this, 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();
    });});

Console:

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

Collectives™ on Stack Overflow

jQuery select multiple same attribute value

5 Answers 5

3 Comments

Comments

1 Comment

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

Comments

1 Comment

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related