Получение содержимого с помощью JQuery?

Question

[Filipp R.]

Здравствуйте. Помогите решить задачу. У меня есть таблица, пример:

<table id="js-list-item" class="table_class my_table_class js_table_class">
   <thead>
      <tr>
         <th>....</th>
         <th>...</th>
      </tr>
   </thead>
   <tbody class="js-list">
      <tr role="row" class="js-list-tr odd" data-item-id="11027" data-item-count="1">
         <td class="sorting_1">Content_11027...</td>
         <td>2</td>
      </tr>
      <tr role="row" class="js-list-tr odd" data-item-id="12063" data-item-count="1">
         <td class="sorting_1">Content_12063...</td>
         <td>2</td>
      </tr>
   </tbody>
</table>

Как с помощью jq, при наведение на tr с data-item-id="12063" или "11027", записать содержимое td class="sorting_1" в переменную sorting_info = "Content_11027..." или "Content_12063...".

Answer 1

[boga-net]

https://jsfiddle.net/ouodkeLn/288/

Comments

[Filipp R.]

Спасибо за решение.

[Sergiu Mitu]

Filipp R., решение не совсем коректное, навидение идет на td, а не на tr как в описании вопроса.

[boga-net]

Sergiu Mitu, я видел, что в описании условие с tr, но сделал, как правильней, потому что в tr может быть несколько td, и в каждом нужно будет получить контент. Поэтому сделал с упором на будущее

[Sergiu Mitu]

boga-net, да, может, но это ничего не меняет, допустим у нас tr шириною в 1000px, в нем 5 td по 200px, при навидении на 800px (4td) из этого самого tr - ничего не произойдет, а нужно чтобы произошло как раз то что было в описании.
Я какбы ничего против не имею, это я так уточнил моментик.

[Filipp R.]

А не подскажите как удалить из переменной orting_info = "Content gre (123 чд.)";, всё что в скобках и сами скобки, что бы на выходе получить: orting_info = "Content gre";.

[boga-net]

Sergiu Mitu, Да, в этом вы правы. Но я ещё делал поправку на то, что человек может не совсем правильно сформулировать то, что он хочет получить в конечном итоге или ошибиться/опечататься, не так представлять работу tr и td, или не учитывать, что в будущем у него в одной строке будет две ячейки

[boga-net]

Filipp R., Простите, я не совсем понял о каких Content gre (123 чд.) идёт речь. Можно пример ? Возможно получится обойтись без регулярного выражения, которое отсеет лишние символы

[Filipp R.]

boga-net, при наведении на sorting_1 в переменную записывается содержимое, пример:

var sorting_info = 'Name inventar (1 л.)';
var sorting_info =  'Name GF inventar (2 н.)';
var sorting_info =  'Name inventar Yfd (6 л.)';
var sorting_info =  'Name inventar 42 (1 н.)';
var sorting_info =  'Name inventar 63 (55 л.)';

А на выходи надо получить переменную var sorting_info = ''; без () и их содержимого.

[boga-net]

Filipp R., есть самое простое решение - обернуть нужный вам текст в какой-то элемент, например в тег span, и получать только его, например:

<tbody class="js-list">
      <tr>
         <td class="sorting_1"><span>Name inventar</span> (1 л.)</td>
         <td>2</td>
      </tr>
      <tr>
         <td class="sorting_1"><span>Name GF inventar</span>(666 л.)</td>
         <td>2</td>
      </tr>
   </tbody>

а в скрипте теперь получать текст из span

$('.sorting_1').hover(function() {
	let sorting_info = $(this).find('span').text();
	$('#info').text('sorting_info:' + sorting_info)
});

https://jsfiddle.net/ouodkeLn/292/

Можно создать регулярное выражение, но если у вас в строке что-то изменится, например будет два элемента в скобках, то придётся переелывать регулярное выражение. А с этим способом вы всегда будете знать, что получите только то, что в теге span

[Filipp R.]

boga-net, содержимое не находится в
не так:

<td class="sorting_1"><span>Name GF inventar</span>(666 л.)</td>

а так:

<td class="sorting_1">Name GF inventar (666 л.)</td>

[boga-net]

Filipp R., да, поэтому я предлагаю оборачивать тот контент, который вам нужно получить, в любой элемент и искать только то, что в нём. Или нужно будет писать регулярное выражение - это более сложный подход. В вашем случае в этом нет необходимости, потому что в будущем, возможно, придётся переписывать регулярное выражение. вам, как новичку, это будет сложнее, чем способ, который ниже

и оборачивая контент, который нужно получить в элемент, например < span > или < u > - вам нужно будет лишь изменить одну строчку кода. Было вот так :

let sorting_info = $(this).text();

// а станет 
let sorting_info = $(this).find('span').text();

Останется добавить .find() и в скобках в кавычках то, где нужно искать текст
find( ' u ' )
find( ' span ' )
find( ' .vash-element ' )

[Filipp R.]

boga-net, понял, спасибо

Answer 2

[Sergiu Mitu]

var sorting_info;
$('.js-list tr').on('mouseenter', function(){
sorting_info = $(this).find('.sorting_1').text()
})