Question

我有许多div，其id值为#result-1, #result-2等。因此，这些div的末尾都有一个前缀数字。通过执行以下操作，我得到了divs有多少个列表项的价值：

$(document).ready(function () {

    var colorCount = $('#result-1 .item-result ul li');

    if (colorCount.length > 0)  {
       $('.test').html(colorCount.length + '&nbsp;' + 'Colours');
    }
    else {
       $('.test').hide();
    }
});

因此，目前我仅定位第一个元素，如何基于id或data-srch-position定位属性。 div具有以下属性：

<div id="result-1" class="search-item" data-srch-position="1" style="width: 100%;">

所以我想定位div_id或data-srch-position="1"

因此前缀编号会更改，即id result-2和data-srch-position =“ 2”等

.test类就是<div class='test'></div>，其中colorCount.length被绑定到显示。

JS Fiddle link:

Answer 1

.test的第一个将针对页面中每个.test元素，因此，要打印一个独特的特定值，这并不理想，因为它总是会被找到的最新数字覆盖（...好吧，除非您的意图目前尚不清楚）

要读取数据值，您只需访问.data()
使用.test（如果它们是子元素）来定位不同的.find()元素

$('[data-srch-position]').each((i, el) => {
  const n = $(el).data('srch-position');
  $(el).find('.test').text(n);
});

<div data-srch-position="3">My srch: <span class="test"></span></div>
<div data-srch-position="7">My srch: <span class="test"></span></div>
<div data-srch-position="1">My srch: <span class="test"></span></div>
<div data-srch-position="9">My srch: <span class="test"></span></div>
<div data-srch-position="42">What is <span class="test"></span> anyways...</div>


<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>

或者您也可以反过来，定位每个孩子.test，然后使用data-*搜索父.closest('parent or self selector')属性值：

$('.test').each((i, el) => {
  const n = $(el).closest('[data-srch-position]').data('srch-position');
  $(el).text(n);
});

<div data-srch-position="3">My srch: <span class="test"></span></div>
<div data-srch-position="7">My srch: <span class="test"></span></div>
<div data-srch-position="1">My srch: <span class="test"></span></div>
<div data-srch-position="9">My srch: <span class="test"></span></div>
<div data-srch-position="42">What is <span class="test"></span> anyways...</div>


<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>

以您的jsFiddle示例为例，您可以将data-*选择器移到所需的元素中，然后将选择器用作目标：

$('[data-count-li]').each(function() {
  const selector = $(this).data('count-li'); // Get the ID selector
  const $LI = $(selector).find('li');        // Find the selector's LI elements
  const LI_total = $LI.length;               // How many LI elements
  
  if(LI_total) { // If higher than 0
    $(this).show().text(`FOUND: ${LI_total} LI ELEMENTS`); // SHOW AND PRINT NUMBER
  }
});

[data-count-li] {
  display: none;  /* HIDE BY DEFAULT (SHOW USING JS) */
}

<div id="result-item-1" class="search">
  <div class='item-colours-result'>
    <ul class="">
      <li>1</li>
      <li>2</li>
    </ul>
  </div>
</div>
<div data-count-li="#result-item-1">Test</div>


<div id="result-item-2" class="search">
  <div class='item-colours-result'>
    <ul class="">
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
  </div>
</div>
<div data-count-li="#result-item-2">Test</div>


<div id="result-item-3" class="search">
  <div class='item-colours-result'>
    <ul class="">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ul>
  </div>
</div>

<div data-count-li="#result-item-3">Test</div>

<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>

Answer 2

这就是我想你要发生的事情。

$(document).ready(function () {
    var colorCount = $('.search-item[data-srch-position]');

    $(colorCount).each(function(i, value){
        ($(this).text().length > 0) ? console.log('true') : console.log('false');
    })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="result-1" class="search-item multiple " data-srch-position="1" style="width: 100%%;">test1</div>
<div id="result-2" class="search-item multiple " data-srch-position="1" style="width: 100%%;">test2</div>
<div id="result-3" class="search-item multiple " data-srch-position="1" style="width: 100%%;"></div>

jQuery获取具有属性值的div数据

2 个答案: