Question

我在变量中添加了几个div元素以缓存它们。

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

使用jQuery如何从数组中选择#description div？

不能保证元素的顺序。

Answer 1

我认为您可以将元素缓存在对象中，并根据需要查询它们。您的对象可能看起来像：

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

cache [id]可以重复使用。

Answer 2

不需要数组中的类名。仅使用ID。

由于“不能保证元素的顺序”，请使用indexOf()方法确定元素在数组中的位置。然后选择元素：

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>

Answer 3

尝试像这样在数组中搜索：

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>

希望我能对您有所帮助。

Answer 4

如果我没记错的话，我会理解您的需求，然后按照以下代码片段对您有帮助。

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>

Answer 5

这是一个快速功能，可以遍历数组并尝试查找您作为针头输入的字符串。 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))

使用jQuery从div数组中按ID选择div

5 个答案: