2013-03-05 4 views
1

HTML-структура:Как найти высоту внутреннего элемента в jquery?

<table class='cls_Name'> 
    <tr> 
     <td>Name</td> 
    </tr> 
    <tr> 
     <td> 
      <div>some operation/text</div> 
     </td> 
    </tr> 
</table> 

Чтобы получить высоту таблицы я делаю, как показано ниже:

$('.cls_Name').height(); 

Он возвращает правильное значение.

Теперь я хочу высоту DIV:

$('.cls_Name').children('td:nth-child(2)').children('div').height(); 

Но она возвращается Null или иногда дает ошибку.

Пожалуйста, дайте мне знать, если у кого есть идея об этом.

Заранее спасибо

ответ

2

попробуйте следующее:

$('.cls_Name td:eq(1)').find('div').height(); 
+0

Это ' 'является вторым' 'во всем'

', но первый в ' '(его родительский элемент) - вы уверены, что': nth-child (2) 'собирается выбрать его? Как показывает [this jsFiddle] (http://jsfiddle.net/6hqb4/), это не правильный селектор для этого элемента. –

+0

Правда это был просто небольшой переписывающий, должен был протестировать его, изменился –

+0

Я тоже не уверен. В одном из кода я сделал это, и это было в SharePoint. Поэтому я не получил структуру html. Я только что применил, и это сработало. Не знаю, что это было в одном tr или другом tr ... Но решение, которое вы предоставили, работает. Благодаря! –

5

В <td> элементы являются потомками, но не детей, на <table> элемента. Функция .children() только понижается на одном уровне в DOM - так, в данном случае, до уровня элементов <tr>. Попробуйте следующие вместо:

$('.cls_Name').find('td:eq(1)').children('div').height(); 
+0

Это действительно рабочее решение. Смотрите здесь скрипку. http://jsfiddle.net/B5avM/ –

+0

Спасибо, это сделано. Но я сомневаюсь в тд для его потомка. Когда я использую td, как показано ниже: $ (this) .children ("td: nth-child (4)"). Css ("font-size", "10px"); $ (this) .children ('td: nth-child (6)'). Children ("div").css ('text-align', 'center'); Это сработало .... но когда использовать ту же самую для height(), это не так? –

+0

@HarishHatnapure Трудно узнать, в чем проблема, не видя полного HTML-кода, на котором выполняется код. –

0

Поскольку .children('td:nth-child(2)') не существует попробовать .children('td:nth-child(1)') вместо этого.

Испытано код

<script type="text/javascript"> 

    $(function() 
    { 
     console.log($('.cls_Name').find('td:nth-child(1)').find('div').height()); 
    }); 

</script> 
<table class='cls_Name'> 
    <tr> 
     <td>Name</td> 
    </tr> 
    <tr> 
     <td> 
      <div>some operation/text</div> 
     </td> 
    </tr> 
</table> 

, что показал мне 20 в console.log();

0

Лучше вы можете указать имя класса для сНа элемента и попробовать это:

<table class='cls_Name'> 
    <tr> 
     <td>Name</td> 
    </tr> 
    <tr> 
     <td> 
      <div class="operation">some operation/text</div> 
     </td> 
    </tr> 
</table> 

Сценарий:

$('.operation').height() 
+0

Нет Я coluldnt применяю класс, поскольку мне нужно генерировать высоту div динамически, а также без его имени класса. –

0

Это было бы лучше, я думаю:

$(document).ready(function() 
{ 
    var sa = $('.cls_Name').find('div').height(); 
    alert(sa); 


}); 
Смежные вопросы