jquery selector with same class

Question

How to select li in repeated ul with same class at click event

<div id="holder">

  <ul class="pattern">
     <li>1</li>
     <li>2</li>
     <li>3</li>
  </ul>
  <ul class="pattern">
     <li>4</li>
     <li>5</li>
     <li>6</li>
  </ul>
  <ul class="pattern">
     <li>7</li>
     <li>8</li>
     <li>9</li>
     <li>10</li>
  </ul>

</div>

i want to select/get the li with number 5(ex only), pls assume that i have a bunch of ul with same classes.

since i have a lot of ul, im looking for selecting the index of ul then select the li.

pls check my answer it will help

guradio
– guradio

2015-10-30 02:46:40 +00:00
Commented Oct 30, 2015 at 2:46 — guradio
– guradio, Commented Oct 30, 2015 at 2:46

MervS · Accepted Answer · 2015-10-30 06:39:18Z

3

You can use jQuery's :contains selector:

 $("li:contains('5')")

For example:

$("ul.pattern").click(function(){
  var index = $(this).index();
  console.log(index);
  $("ul.pattern").eq(index).find("li:contains('5')").css("background","red");
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="holder">

  <ul class="pattern">
     <li>1</li>
     <li>2</li>
     <li>3</li>
  </ul>
  <ul class="pattern">
     <li>4</li>
     <li>5</li>
     <li>6</li>
  </ul>
  <ul class="pattern">
     <li>7</li>
     <li>8</li>
     <li>9</li>
     <li>10</li>
  </ul>

</div>

Edit: Code updated to get current index of currently clicked ul using index() and locating the specific li among all ul's with the text 5 by using eq() and find() (with the :contains selector)

edited Oct 30, 2015 at 6:39

answered Oct 30, 2015 at 2:28

MervS

5,9223 gold badges26 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

mon-sun Over a year ago

actually i dont have any content in my li, my scenario is, when li is click ( get the dom position and return something .html("blablabla") )

MervS Over a year ago

I suppose you may need to modify your question to include your requirement.

MervS Over a year ago

Not sure about your specific use-case but see the edit.

guradio · Accepted Answer · 2015-10-30 02:46:06Z

2

$('.pattern li').click(function() {
  console.log($(this).index())
  console.log($(this).text())
  console.log($('.pattern').find('li:eq(' + $(this).index() + ')').text())

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="holder">

  <ul class="pattern">
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
  <ul class="pattern">
    <li>4</li>
    <li>5</li>
    <li>6</li>
  </ul>
  <ul class="pattern">
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
  </ul>

</div>

Try this way

edited Oct 30, 2015 at 2:46

answered Oct 30, 2015 at 2:40

guradio

15.6k4 gold badges39 silver badges65 bronze badges

Comments

Anders · Accepted Answer · 2015-10-30 14:19:51Z

0

Do this:

$('<li>').val() == 5;

edited Oct 30, 2015 at 14:19

Anders

8,66310 gold badges60 silver badges101 bronze badges

answered Oct 30, 2015 at 2:04

RyanM

7616 silver badges20 bronze badges

1 Comment

Drenmi Over a year ago

Please consider editing your post to add more explanation about what your code does and why it will solve the problem. An answer that mostly just contains code (even if it's working) usually wont help the OP to understand their problem.

Collectives™ on Stack Overflow

jquery selector with same class

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related