Nehmen Sie img nur von der div, wo das Skript aufgerufen wurde

Question

Ist es möglich mit einer js onclick-Funktion, um das Bild alt ohne IDs oder Klasse zu bekommen?

Ich möchte das Bild von hier, von der div, wo der Anruf gemacht wurde, nehmen; weil, wie man sieht, gibt es eine allgemeine div, wo es alle Elemente ... das Bild und den Knopf gibt.

Wenn das div ein Elternteil ist und alle anderen Elemente childs sind, müssen Sie das img child nur aus diesem div finden, auch wenn es mehrere ähnliche divs auf derselben Seite gibt.

<div id="ww10140700815" class="post-content"> 

<div class="col-md-7"> 
<img src="../im/wall/w10140700815.jpg" alt="w10140700815"/> 
</div> 
<div class="col-md-5"> 
<span class="meta">ID: w10140700815</span> 
<a class="btn btn-default">Take Alt</a> 
</div> 

</div> 
<div id="ww10140700815" class="post-content"> 

<div class="col-md-7"> 
<img src="../im/wall/w10140700815.jpg" alt="w10140700815"/> 
</div> 
<div class="col-md-5"> 
<span class="meta">ID: w10140700815</span> 
<a class="btn btn-default">Take Alt</a> 
</div> 

</div> 
<div id="ww10140700815" class="post-content"> 

<div class="col-md-7"> 
<img src="../im/wall/w10140700815.jpg" alt="w10140700815"/> 
</div> 
<div class="col-md-5"> 
<span class="meta">ID: w10140700815</span> 
<a class="btn btn-default">Take Alt</a> 
</div> 

</div> 

ich das ve verwendet, angrenzend an das img zur Verifikation, aber es wählt alle Bilder auf der Seite, weil ich mehrere divs haben, wie oben

$("div > img:nth-child(1)").css('border', '4px solid black'); 

Answer 1

Sie könnten Nest in einem div, dass dessen Kind bekommt, oder man könnte es für eine einfachere Zeit zum img hinzufügen

<div id="ww10140700815" class="post-content"> 

<div class="col-md-7"> 
<img onclick="alert(this.getAttribute('alt'))" src="../im/wall/w10140700815.jpg" alt="w10140700815"/> 
</div> 
<div class="col-md-5"> 
<span class="meta">ID: w10140700815</span> 
<a class="btn btn-default">Take Alt</a> 
</div> 

Best,

Dhruv

Answer 2

Wenn Ihre HTML-Struktur so bleibt, wie Sie sie anzeigen, verwenden Sie CSS-Selektoren, um die richtigen Elemente für das Klickereignis zu isolieren und das entsprechende img-Element zu finden.

// Listen for clicks on any div with the "post-content" class 
 
$("div.post-content").on("click", function(evt){ 
 
    // Look for images that are in a child div that has a class of "col-md-7" 
 
    var $img = $("div[class='col-md-7'] img", this); 
 
    console.log($img.attr("alt")); // Get its alt value 
 
});

.btn { cursor:pointer; display:inline-block; background:#e0e0e0; border-radius:4px; padding:5px; } 
 
.btn:hover { box-shadow:0 0 2px #909090; } 
 
.btn:active { box-shadow:0 0 2px #303030; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="ww10140700815" class="post-content"> 
 
    <div class="col-md-7"> 
 
    <img src="../im/wall/w10140700815.jpg" alt="w10140700815"/> 
 
    </div> 
 
    <div class="col-md-5"> 
 
    <span class="meta">ID: w10140700815</span> 
 
    <a class="btn btn-default">Take Alt</a> 
 
    </div> 
 
</div> 
 
<div id="ww10140700815" class="post-content"> 
 
    <div class="col-md-7"> 
 
    <img src="../im/wall/w10140700825.jpg" alt="w10140700825"/> 
 
    </div> 
 
    <div class="col-md-5"> 
 
    <span class="meta">ID: w10140700825</span> 
 
    <a class="btn btn-default">Take Alt</a> 
 
    </div> 
 
</div> 
 
<div id="ww10140700815" class="post-content"> 
 
    <div class="col-md-7"> 
 
    <img src="../im/wall/w10140700835.jpg" alt="w10140700835"/> 
 
    </div> 
 
    <div class="col-md-5"> 
 
    <span class="meta">ID: w10140700835</span> 
 
    <a class="btn btn-default">Take Alt</a> 
 
    </div> 
 
</div>