CODEWITHSUNDEEP
javascriptjquery
David Biga
David Biga

Reputation: 2801

Accessing a specific li within a ul

After looking at past examples and source code I have made, I can't seem to work out accessing a specific <li><a>the value in this</a></li> based on a parameter sent in.

Mockup:

  <ul class="selectBox-dropdown-menu selectBox-options size-dropdown mediumSelect footwear" style="top: 309px; left: 34px; display: none;">
    <li class="" style="display: none;"><a rel=""></a></li>
    <li class="size-not-in-stock"><a rel="3096786:6"> 6</a></li>
    <li class="size-not-in-stock"><a rel="3096787:6.5"> 6.5</a></li>
    <li class=""><a rel="3096788:7"> 7</a></li>
    <li class="selectBox-selected"><a rel="3096789:7.5"> 7.5</a></li>
    <li class=""><a rel="3096790:8"> 8</a></li>
    <li class=""><a rel="3096791:8.5"> 8.5</a></li><li><a rel="3096792:9"> 9</a></li>
    <li><a rel="3096793:9.5"> 9.5</a></li><li><a rel="3096794:10"> 10</a></li>
    <li><a rel="3096795:10.5"> 10.5</a></li><li><a rel="3096796:11"> 11</a></li>
    <li><a rel="3096797:11.5"> 11.5</a></li><li><a rel="3096798:12"> 12</a></li>
    <li><a rel="3096799:12.5"> 12.5</a></li><li><a rel="3096800:13"> 13</a></li>
    <li><a rel="3096801:14"> 14</a></li><li><a rel="3096802:15"> 15</a></li></ul>
  </ul>

Here is what I am trying to get. Let us say that a user puts in a value of 7, well than it should find the corresponding <li><a></a></li> that contains the number 7 and click it.

My troubles are with finding that value inside this, I know I need to use find within the <ul> but what stumps me is based on a value.

UPDATE:

I just want to make clear that, this is something that is going to be an auto process so I am trying to make it so I don't have to do anything except load the page.

Upvotes: 0

Views: 172

Answers (4)

epascarello
epascarello

Reputation: 207501

There is no need to loop through and read the innerHTML of every element like all of the other solutions appear to be doing. You can just do it with a selector.

Since the rel attribute seems to have the data you are after at the end :size, you can use use :has() and ends with $= selectors to get the lis you are after.

var num = 7;
var elems = $(".footwear li:has(a[rel$=':" + num + "'])");
console.log(elems.length);

And if you want to click it, than you call .click() or .trigger("click")

function findAndClick (size) {
    var elem = $(".footwear li:has(a[rel$=':" + size + "'])");
    elem.trigger("click");
}

And to trigger it on the page load it would be something like

$(window).on("load", function() { findAndClick(7); } );

or document ready

$( function() { findAndClick(7); } );

Sad thing is, this solution appears to be great with a simple selector, but the performance can be subpar. If there is only going to be one element with the size, the best performance would be an each() loop and breaking out of it when you find the one element. No need to look at the other elements.

The best performing would be an each()

function findAndClick (size) {
    var elem;
    size = size.toString();
    $('.footwear').find('a').each(function () {
        if ($.trim($(this).text()) == size) {   //compare the text
            elem = $(this).parent();  //set the element that contains the link 
            return false;  //exit each loop
        }
    });

    if (elem) {
        elem.trigger("click");  //fire click
    }
}

For even better performance, eliminate the need to read the text of the element or use a ends with selector. Add a data attribute to the element.

<li data-size="7">

and than you would just use a selector

function findAndClick (size) {
    $('.footwear li[data-size="' + size + '"]').trigger("click");
}

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388316

You need something like

var test = "the content to seek";
$('ul.footwear').find('a').filter(function(idx, el){
    return $.trim($(this).text()) == $.trim(test);
}).closest('li').trigger('click')

Demo: Fiddle

Upvotes: 3

Karl-Andr&#233; Gagnon
Karl-Andr&#233; Gagnon

Reputation: 33870

Since you have an attribute rel that finish with the content, you can use this:

$('a[rel$="\:'+valueToMatch+'"]').parent()

Upvotes: 0

TGH
TGH

Reputation: 39248

I would optimize this by making your structure better suited for these types of queries

<li id="10"><a rel="3096793:9.5"> 9.5</a></li><li><a rel="3096794:10"> 10</a></li>

Put an id on the li that corresponds to the value of the a tags.

Then you can do a simple $("#10") selector

While it's possible to make complex selectors based on filters etc, keep in mind that performance will not be great in general for non browser backed selectors (pseudo selectors)

Upvotes: 0

Related Questions