jQuery target attribute value

Question

I would like to target the following attribute value: data-search-position

<div id="result-item-1" class="search-item " data-search-position="1">
    <div class='item-colours-result'>
        <ul class='list-class'><li>1</li><ul>
  </div>
</div>

<div id="result-item-2" class="search-item " data-search-position="2">
    <div class='item-colours-result'>
        <ul class='list-class'><li>1</li><ul>
  </div>
</div>

As the data-search-position will define how many list items it will have, I need to find out how to do that. I have the following so far but it's no good:

$(document).ready(function () {

    var colorCount = $('#result-item-1 .item-colours-result ul li');
    if (colorCount.length > 0) {
        // do something
    }

    else {
        //do something
    }

});

@DavidThomas sorry my bad, that was a type – Sole Sep 10 '19 at 16:43 — Sole, Sep 10 '19 at 16:43

score 1 · Accepted Answer · answered Sep 10 '19 at 16:53

1

You can use a loop over .search_item instead of specific #id, and then apply your logic. When you get the list count, set the attribute with .attr()

$('.search-item').each(function(index,item){
  var colorCount = $(item).find('.item-colours-result ul li').length;
  // alert(item.id+':'+colorCount) count by item id
  $(item).attr('data-search-position',colorCount)
})

See this jsfiddle:

https://jsfiddle.net/bh8gL15f/

answered Sep 10 '19 at 16:53

F.Igor

4,119
1
18
26

How would I display the result in a div? – Sole Sep 10 '19 at 17:57
1

You could use `$("#divID").html(colorCount)` (using div id) – F.Igor Sep 10 '19 at 18:02
If I use that, it returns one number ? – Sole Sep 10 '19 at 18:06
https://jsfiddle.net/RS41/k8ar0bc6/4/ i implemented you code here – Sole Sep 10 '19 at 18:11
1

Use id's instead of class names https://jsfiddle.net/nz3djxvk/ – F.Igor Sep 10 '19 at 18:28
Thanks F.Igor. Can you explain how I could target the different div id's instead: `
` ?
– Sole Sep 11 '19 at 10:51
My div has only the Id of `numberOfColours` and this approach is only targeting the first result – Sole Sep 11 '19 at 10:53

jQuery target attribute value

1 Answers1