jquery to change the value inside a li with custom attribute

Question

I'm trying to change the value of the href attribute which is inside the li and i'; trying to identify it with the custom attribute data-id

Is it possible to get the li based on custom id and change the href inside it?

 <li data-id="outline">
      <div>
        <a href="abc/abd/ccc/html">Answer</a>
      </div>
  </li>

Answer 1

It's pretty simple to select it using the data-id. See below

$('li[data-id="outline"] a').attr('href', 'foo');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li data-id="outline">
      <div>
        <a href="abc/abd/ccc/html">Answer</a>
      </div>
  </li>

Keep in mind that performing an attribute selector has some inefficiencies with it in comparison to id and class lookups. Attribute selectors by their nature have to evaluate every possible element to see if they have the matching element. Performing a lookup with an id or class is much faster as the browser has special ways it tracks which elements have ids and classes so the lookups are faster

So it would be better to add a class or id to your element if possible.