Selecting div by ID from array of divs using jQuery

Question

I have added several div elements to a variable to cache them.

[
    div#description.tab__content,
    div#reviews.tab__content,
    div#delivery.tab__content,
    div#returns.tab__content,
]

Using jQuery how would I select the #description div from the array?

The ordering of the elements cannot be guaranteed.

I know its a rather old post, but perhaps some of the answers there will be helpful - stackoverflow.com/questions/3620116/… — Lix
– Lix, Commented Jul 24, 2018 at 13:34
Assuming that's a jquery collection of dom elements, just use whateverYourCollectionIsCalled.filter('#description') — billyonecan
– billyonecan, Commented Jul 24, 2018 at 14:40

trk · Accepted Answer · 2018-07-24 13:53:49Z

1

I think you could cache your elements in an object and query them as needed. Your object could look like:

var cache = {
    "#description": div#description.tab__content,
    "#reviews": div.#reviewstab__content,
    "#delivery": div#delivery.tab__content,
    "#returns": div#returns.tab__content,
}

cache[id] can be reused.

answered Jul 24, 2018 at 13:53

trk

2,23815 silver badges21 bronze badges

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

Comments

Matheus Pitz · Accepted Answer · 2018-07-24 13:50:00Z

0

Try to search in the array, like this:

var a = $('div');
$.each(a, function(index, value) {
  if(value.id === 'test3')
    console.log('found '+value);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test" class="test"></div>
<div id="test2" class="test2"></div>
<div id="test3" class="test3"></div>
<div id="test4" class="test4"></div>
<div id="test5" class="test5"></div>

I hope that I helped you.

answered Jul 24, 2018 at 13:50

Matheus Pitz

4762 silver badges9 bronze badges

Comments

Shell · Accepted Answer · 2018-07-24 13:58:21Z

What I understood your needs if I am not wrong then following snippet will be helpful for you.

var array = [
              'div#div1',
              'div#div2',
              'div#div3',
              'div#div4'
            ];
            
$('#btnShow').click(function(){
  for (var i=0; i < array.length; i++){
    $(array[i]).show();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1" style="display:none">
    Container 1  
</div>
<div id="div2" style="display:none">
    Container 2
</div>
<div id="div3" style="display:none">
    Container 3  
</div>
<div id="div4" style="display:none">
    Container 3  
</div>


<button id="btnShow">Show Containers</button>

V. Dimitrov · Accepted Answer · 2018-07-24 14:36:40Z

0

Here's a quick function that loops through the array and tries to find the string you enter as a needle. Try it out on jsFiddle

var list = [
  "div#description.tab__content",
  "div#reviews.tab__content",
  "div#delivery.tab__content",
  "div#returns.tab__content"
];

function findElement(needle, haystack) {
  var regex = new RegExp(needle, 'i');
  var result = null;

  haystack.forEach(function(value) {
    if (value.match(regex)) {
      result = value;
    }
  });

  return result;
}

jQuery(findElement('description', list))

answered Jul 24, 2018 at 14:36

V. Dimitrov

1421 silver badge12 bronze badges

Comments

Razvan Zamfir · Accepted Answer · 2018-07-24 19:37:55Z

No need for the class names in the array. Use ids only.

Since "the ordering of the elements cannot be guaranteed", use the indexOf() method to determine the element's position in the array. Then select the element:

var divs = [
    'div#reviews',
    'div#description',
    'div#delivery',
    'div#returns'
];

// get the element's position (index)
var divIdx = divs.indexOf('div#description');

console.log(divs[divIdx] + ' has the index ' + divIdx);

// select the element from the array
var $description = $(divs[divIdx]);
 
// do stuff with the element
$description.addClass('active');

body {
  font-family: Arial, sans-serif;
}
.tab__content {
  padding: 10px;
  font-size: 12px;
  line-height: 1.5;
}
.tab__content.active {
  background: #efefef;
}
.tab__content h2 {
  margin-top: 0;
  margin-bottom: 10px;
}
.tab__content p {
  margin: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div id="reviews" class="tab__content">
  <h2>Reviews</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam totam odit voluptas veniam illo saepe vel similique assumenda, dignissimos iste aperiam aliquid dolore esse atque inventore officiis enim id natus?</p>
</div>

<div id="description" class="tab__content">
  <h2>Description</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam totam odit voluptas veniam illo saepe vel similique assumenda, dignissimos iste aperiam aliquid dolore esse atque inventore officiis enim id natus?</p>
</div>

<div id="delivery" class="tab__content">
  <h2>Delivery</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam totam odit voluptas veniam illo saepe vel similique assumenda, dignissimos iste aperiam aliquid dolore esse atque inventore officiis enim id natus?</p>
</div>

<div id="returns" class="tab__content">
  <h2>Returns</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam totam odit voluptas veniam illo saepe vel similique assumenda, dignissimos iste aperiam aliquid dolore esse atque inventore officiis enim id natus?</p>
</div>

Collectives™ on Stack Overflow

Selecting div by ID from array of divs using jQuery

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related