У меня есть таблица с двумя ссылками в каждой строке, например:

<table class="list">
    ...
    <td>
      <a href="#" id="abcdefg756">756</a>
    </td>
    <td>
      <a href="#">some link</a>
    </td>
    <td>some text</td>
    <td>some more text</td>
    ...
</table>

Первая ссылка всегда имеет идентификатор, который начинается с тех же символов, за которыми следует случайное число. Вторая ссылка не имеет идентификатора. Я хотел бы получить внутренний HTML-код первой ссылки при нажатии на ссылку any .

Демонстрация здесь: http://codepen.io/sol_b/pen/XNqOgN

Я попробовал несколько вещей, используя Jquery. Это то, что я до сих пор:

 $('.list').find("a").click(function(){
    $(this).each(function(){
      if ($(this).attr('id') !=undefined) {
        var number = $(this).html();
        alert (number);
      } else if ($(this).attr('id') == undefined) {
        var number = $(this).prev('a').html(); 
        alert (number);
      }
    })
  });

Это работает для первой ссылки, но возвращает вторую неопределенную для второй. Я не уверен, почему использование .prev не работает.

Любая помощь высоко ценится!

(обратите внимание, что я не могу изменить структуру HTML)

1
sol 8 Дек 2016 в 12:58

6 ответов

Лучший ответ

Сделайте событие одного клика, перейдите к родителю tr найдите ссылку с идентификатором, начинающимся с "abcdefg", получите текст

$('.list tr a').click(function(){
var text = $(this).closest('tr').find('a[id^="abcdefg"]').text();
console.log(text)
});

Демо: http://codepen.io/anon/pen/qqKrjE?editors=1111

3
madalinivascu 8 Дек 2016 в 10:15

Просто используйте $('.list tr td a').first().html(), чтобы получить первую ссылку таблицы. Итак, это все, что вам нужно:

$(function(){  
  $('.list').find("a").click(function(){
      if ($(this).attr('id') !=undefined) {//Links with id (1st column)
        var number = $(this).html();//Get clicked link
        alert (number);
      } else if ($(this).attr('id') == undefined) {//Links with no id (2nd column)
        var number = $('.list tr td a').first().html();//Get first link
        alert (number);
      }
  });
})
1
Theodore K. 8 Дек 2016 в 10:04

Когда ссылка нажата, вы должны перейти к родительскому «tr», а затем выбрать первую ссылку в нем, например:

$(this).closest('tr').find('a').eq(0);

Таким образом, у вас всегда будет первая ссылка в строке, по которой вы щелкнули.

0
Marc Brillault 8 Дек 2016 в 10:19

.prev() возвращает предыдущего соседа. Если ни один из предшествующих элементов не существует или если предыдущий элемент-элемент не соответствует предоставленному селектору, возвращается пустой объект jQuery.

В вашем случае изменение .prev() на .parent().prev().children() поможет.

http://codepen.io/anon/pen/XNYMNG?editors=1010

1
Abin Thomas 8 Дек 2016 в 10:15

Ваш код будет работать с последующим кодом,

  $(function(){

  $('.list').find("a").click(function(){
    $(this).each(function(){
      if ($(this).attr('id') !=undefined) {
        var number = $(this).html();
        alert (number);
      } else if ($(this).attr('id') == undefined) {
        //Little bit change here
        var number = $(this).parent().prev().find('a').html(); 
        alert (number);
      }
    })
  });
})
0
SilentCoder 8 Дек 2016 в 10:07

Попробуйте что-то вроде этого -

$(document).ready(function () {
    $('.list').find("a").click(function () {
        if (this.id == "") {

            alert(($($($($(this).parent()[0]).parent()[0]).children()[0]).children()[0]).innerHTML)
        }

    });
});
0
Satish 8 Дек 2016 в 13:33