JQuery - показать содержимое DIV по ссылке без идентификатора/класс ссылки

Question

У меня есть этот код:

function showContent() { 
    ... 
} 

<div id="example"> 
    content 
    <a href="#" onClick="showContent();return false">Link</a> 
</div> 

я хотел бы, когда я нажимаю на Link, показать содержание из div, без использования id или класса в качестве ссылки, но (возможно) простой этот.

Как я могу это сделать?

Answer 1

Ну, там не много контекста, но это один из способов:

<div id="example"> 
<p style="display: none;">content</p> 
<a href="#" onClick="showContent(this);return false">Show content above</a> 
</div> 

function showContent(el) { 
    $(el).parent().children(':first-child').show(); 
} 

http://jsfiddle.net/LeVFb/

Или, если вы хотите, чтобы показать все внутри (и я не думаю, что :not действительно имеет значение * в данном случае):

function showContent(el) { 
    $(el).parent().children(':not(a)').show(); 
} 

* на самом деле, я хотел бы пойти дальше и сказать, оставить его, если у вас нет особых причин не:

function showContent(el) { 
    $(el).parent().children().show(); 
} 

Это будет зависеть от контента, который вы пытаетесь показать и ли какие-либо теги A являются display: hidden и должны быть показаны.

http://jsfiddle.net/LeVFb/2/

Это может пойти несколькими способами.

Answer 2

Попробуйте использовать Jquery parent селектор

$(this).parent('div').show() 

Однако, как ссылка отображается, если содержащий DIV не является?

Answer 3

Если ссылка находится в пределах DIV, вы могли бы это сделать ...

<a href="#" onClick="showContent(this);return false">Link</a> 

затем в функции ...

function showContent(link){ 
    alert($(link).parent().html()); 
} 

Однако это предполагает, что ДИВ видна уже поэтому вам не нужно «показывать» его.

Answer 4

Вы будете иметь, чтобы обернуть «содержание» в <div> (или какой-либо другой блок элемента):

<div id="example"> 
    <div style="display: none;">content</div> 
    <a href="javascript:void(0)" onClick="showContent(this)">Link</a> 
</div> 

И не используйте href="#" для такого рода связей, href="javascript:void(0)" это лучше выбор, который вызывает меньше проблем; метод void(0) также означает, что вам не нужно return false в обработчике кликов, чтобы браузер не пытался интерпретировать пустой фрагмент.

Назад к нашей регулярно запланированной программе.Тогда ваш showContent становится довольно просто:

function showContent(e) { 
    $(e).prev('div').show(); 
} 

Лучший способ заключается в использовании JQuery привязать обработчик щелчка:

<div id="example"> 
    <div style="display: none;">content</div> 
    <a href="javascript:void(0)">Link</a> 
</div> 

И потом:

$('#example a').click(function() { 
    $(this).prev('div').show(); 
});