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 - https://stackoverflow.com/questions/3620116/get-css-path-from-dom-element — Lix, Jul 24 '18 at 13:34
Assuming that's a jquery collection of dom elements, just use `whateverYourCollectionIsCalled.filter('#description')` — billyonecan, Jul 24 '18 at 14:40
Check **[this answer](https://stackoverflow.com/a/51500311/4512005)** out please. — Razvan Zamfir, Jul 24 '18 at 20:09

score 1 · Answer 1 · answered Jul 24 '18 at 13:53

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.

Razvan Zamfir · Answer 2 · 2018-07-24T19:37:55.247

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>

score 0 · Answer 3 · answered Jul 24 '18 at 13:50

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.

score 0 · Answer 4 · answered Jul 24 '18 at 13:58

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>

score 0 · Answer 5 · answered Jul 24 '18 at 14:36

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

Selecting div by ID from array of divs using jQuery

5 Answers5