How to select an element with no class and no id, that isn't always there?

Question

Here's the situation - there is a <li> in my code that appears on certain conditions that I need to apply positioning to. It has no id, no class. I can't use nth-child, because sometimes it's not there so the next <li> gets selected, breaking my design. I've been on this for months now, it appears that Javascript is going to be the only answer here but I don't even know where to begin with that.

I suppose I could modify the source code to give the <li> an id, but that is not as elegant a solution as I'd like. Modifying the code that way will break the removal script for the plugin that inserts this code.

Any help would be hugely appreciated. Thanks.

Answer 1

what you need to do is to find out the unique point of your li element, it could be id, class, attribute, style, innerText, or anything.
for example:

• the innerText of the element is 'i am li', just traverse all the li elements in your container, use ele.innerText to match it
• or the li has a backgroud: red which is unique, your may use window.getComputedStyle(element).getPropertyValue("background") to traverse all the li elements in your container.

update:
First, if your li element has unique attribute,class,id, it will be easier.

<li class="test" id="test" name="handsome"></li>
li.test {}
li#test {}
li[name="handsome"] {} // ~=, ^=, $=, *= will also work

In your case, if the href attribute of the a tag is unique, you may do it like this simple example below.

function getTarget() {

    //find all the li elements in your container
    var $targetList = $('.container li');
    var $link;
    for( var i = 0; i < $targetList.length;i++) {
        $link = $($targetList[i]).find('a');

        //you can use any unique point to find the one
        if ($link.length && $link.attr('href') == 'xxxxxx') {
            return $targetList[i];
        }
    }
}

// the target is the li you want
target = getTarget();

Also, if you are not sure want about the href value, your may use string.indexOf('http://www.test.com'), if your innerText of li is unique, just change the judgement, it depends on your real situation ,just find the unique point and match it.