используя jQuery forEach, чтобы найти <p>, на котором произошел исходный клик

Question

У меня есть список <p>, где могут возникнуть некоторые клики.Я понимаю, как прокрутить их примерно так:

        $('p').each(function() { 

        });

Но я не понимаю, как получить значения некоторых элементов внутри этих абзацев.Я смотрю на API здесь для атрибутов: http://api.jquery.com/category/attributes/, но почему-то я вижу не очень важные вещи.

Вот типичное содержание моего <p>

<p class="half_text">0 
    <strong>
      <a class="vote_up" style="color: #295B7B; font-weight:bold;" href="#" data-problem_id="48">Vote Up</a>
    </strong> 
    | 0 
    <strong>
        <a class="vote_down" style="color: #295B7B; font-weight:bold;" href="#" data-problem_id="48">Vote Down</a>
    </strong>
</p>

Что мне нужно сделать, это увеличить или уменьшить 0, который находится внутри «half_text» или сразу после |персонаж в середине всего этого.Я могу обернуть их внутри тега span, но как мне сопоставить тег span с частью data-problem_id = "48" этой конкретной <p>?

Спасибо !!

Answer 1

Я предлагаю вам обернуть ваши значения в промежутки для более простого чтения:

<p class="half_text">
    <span class="votes_up">
        0 
    </span>
    <strong>
      <a class="vote_up" style="color: #295B7B; font-weight:bold;" href="#" data-problem_id="48">Vote Up</a>
    </strong> 
    |  
    <span class="votes_down">
        0 
    </span>
    <strong>
        <a class="vote_down" style="color: #295B7B; font-weight:bold;" href="#" data-problem_id="48">Vote Down</a>
    </strong>
</p>

А затем, скрипт становится более простым и более легким для чтения:

$('p.half_text a.vote_up').click(function(e){
    e.preventDefault();
    var votes = $(this).closest('span.votes_up');
    votes.text((+votes.text() || 0) + 1);
});
$('p.half_text a.vote_down').click(function(e){
    e.preventDefault();
    var votes = $(this).closest('span.votes_down');
    votes.text((+votes.text() || 0) + 1);
});

Answer 2

Вам не нужно использовать каждый цикл вообще. Если вы обрабатываете клик даже по ссылкам, вы можете сделать что-то вроде:

var $this = $(this);
var p = $this.parentsUntil('p');
if($this.hasClass('vote_up')){
    $this.text(parseInt($this.text, 10) + 1);
}
else {
    $this.text(parseInt($this.text, 10) - 1);
}

Answer 3

Я думаю, что это то, что вы после http://jsfiddle.net/7T4AK/

Я добавил spans, чтобы вы могли легко получить доступ к номеру, который необходимо увеличить. Это должно помочь вам понять, как сделать то же самое для голосования «вниз».

$('a.vote_up').click(function(){
    var span = $(this).closest('p').find('span.up');
    span.text(parseInt(span.text(),10) + 1);
});

Answer 4

$('.vote_up').click(function(event) {
  var span = $(event.target).parent().find('.yourSpanClass');
  span.html(parseInt(span.html())+1);
};

Я оставлю за вами то же самое для voice_down.

Answer 5

Вы должны обернуть свои числа в теги <span>, и тогда вы можете сделать что-то вроде этого:

$('a', 'p.half_text').click(function(e) {
    var $this = $(this), $p = $this.closest('p.half_text'), $num, chg = 1;
    if($this.hasClass('vote_up')) {
        $num = $p.find('span.up');
    }
    else if($this.hasClass('vote_down')) {
        $num = $p.find('span.down');
        chg = -1;
    }
    $num.text(parseInt($num.text(), 10) + chg);
});

Демо: http://jsfiddle.net/gRLad/7/

Answer 6

$('p').click(function(e){
    alert( $(e.target).html() );
});

работай отсюда ..