javascript - Catch element by class using index or eq in jquery - Stack Overflow

admin管理员组

文章数量:1391951

HTML code:

<table border='1' cellpadding='5'> 
    <tr>
        <td class="order"><a href="#">two</a></td>
        <td>demo</td>
        <td>last</td>
    </tr>
    <tr>
        <td>two</td>
        <td class="order"><a href="#">three two</a></td>
        <td>sample</td>
    </tr>
    <tr>
        <td>two</td>
        <td class="order"><a href="#">five two</a></td>
        <td>sample</td>
    </tr>
    <tr>
        <td>five</td>
        <td>quick</td>
        <td class="order"><a href="#">nine</a></td>
    </tr>
</table>

jQuery code:

$('.order').click(function(){
var index = $(this).index();
    var text = $(".order:eq(index-1)").text();
    alert(text);
});

On clicking any order class I want to get previous or next element with same order class. What iswrong with my code.

Here is my Fiddle

Thank you.

HTML code:

<table border='1' cellpadding='5'> 
    <tr>
        <td class="order"><a href="#">two</a></td>
        <td>demo</td>
        <td>last</td>
    </tr>
    <tr>
        <td>two</td>
        <td class="order"><a href="#">three two</a></td>
        <td>sample</td>
    </tr>
    <tr>
        <td>two</td>
        <td class="order"><a href="#">five two</a></td>
        <td>sample</td>
    </tr>
    <tr>
        <td>five</td>
        <td>quick</td>
        <td class="order"><a href="#">nine</a></td>
    </tr>
</table>

jQuery code:

$('.order').click(function(){
var index = $(this).index();
    var text = $(".order:eq(index-1)").text();
    alert(text);
});

On clicking any order class I want to get previous or next element with same order class. What iswrong with my code.

Here is my Fiddle

Thank you.

• javascript
• jquery

Share Improve this question Follow edited Apr 27, 2015 at 6:04 Brijesh Bhatt 3,83033 gold badges2020 silver badges3434 bronze badges asked Apr 25, 2015 at 6:39 Iftakharul AlamIftakharul Alam 3,32144 gold badges2424 silver badges3333 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

index is a variable so you have to add it to the string in jQuery like:

$(".order").click(function() {
    var index = $(".order").index(this);
    var text = $(".order:eq("+(index-1)+")").text();
    alert(text);
});

DEMO

You need to find the index based on the collection set

var $orders = $('.order').click(function () {
    var index = $orders.index(this);
    if (index > 0) {
        var text = $orders.eq(index - 1).text();
        alert(text);
    }
});

Demo: Fiddle

There are two problems with that code:

1. First, that form of index will tell you the index of the element relative to its siblings, not relative to other elements with the same class. So with your HTML, it'll always be 1 because all of your .order elements are the second child in their parent.

2. The second thing is that this line:

   var text = $(".order:eq(index-1)").text();
   

   ...uses index literally, it doesn't swap in the value of your index variable.

You're on the right track with index, though, you just use a different form of it:

var orders = $(".order");
var index = orders.index(this);

Then rather than build a selector that jQuery can't hand off to the browser (because it uses a jQuery-specific :eq selector), use the eq function:

var text = orders.eq(index - 1).text();

But you'll want to handle the case where there is no previous element as well, perhaps:

var text = index > 0 ? orders.eq(index - 1).text() : "default text";

Live example:

$('.order').click(function(){
    var orders = $(".order");
    var index = orders.index(this);
    var text = index > 0 ? orders.eq(index - 1).text() : "default text";
    alert(text);
    return false;
});

<table border='1' cellpadding='5'> 
    <tr>
        <td class="order"><a href="#">two</a></td>
        <td>demo</td>
        <td>last</td>
    </tr>
    <tr>
        <td>two</td>
        <td class="order"><a href="#">three two</a></td>
        <td>sample</td>
    </tr>
    <tr>
        <td>two</td>
        <td class="order"><a href="#">five two</a></td>
        <td>sample</td>
    </tr>
    <tr>
        <td>five</td>
        <td>quick</td>
        <td class="order"><a href="#">nine</a></td>
    </tr>
</table>
<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>

本文标签： javascriptCatch element by class using index or eq in jqueryStack Overflow